Start with a Wechat Mini Program

Get started

It’s quite easy to start developing a Wechat Mini Program following below tutotial.

If you do it right, you have the development tool and an Mini Program account for now. Let’s search for an mini program project you prefered on Github, and pull it into your local folder.
Open that project using the development tools with your own account it will ask for.

Now we need to know how it works with debugging and the official tutotial.

As far as I known, some points you need to know firstly before you codes.

  • The app.json configuration is global to current Mini Program, which includes all of its page paths, permission you will added for userLocation or sth, and bottom tabBar you will provide a list of pages for it.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    app.json
    {
        "pages": [
            "pages/index/index",
            ...
        ],
        "permission": {
          "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
          }
        },
        "window": {
            "backgroundTextStyle": "",
            "navigationBarBackgroundColor": "",
            "navigationBarTitleText": "",
            "navigationBarTextStyle": "",
            "enablePullDownRefresh": 
        },
        "tabBar": {
            "color": "",
            "selectedColor": "",
            "borderStyle": "",
            "backgroundColor": "",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "",
                    "selectedIconPath": "",
                    "text": ""
                },
                ...
            ]
        }
    }

  • project.config.json is a config file for the whole project, it includes your appid(aka your mini program account), the project name and version. and so on.

  • page.json file is for every page we added as above pages/index/index, the pages/index is just the dictionary, there will be some files named index under that dic. The index.json is one of them, it useally used to name the page title. Btw, there also are files named index.js, index.wxml and index.wxss, thwy will be introduced as below.
  • .wxml file. WXML acts as the role of HTML. It’s used to add a view(image, button, swiper…) and the bind with related function in .js file.
  • .js file is a JS scripts used to process users’ operation on UI.
  • .wxss file possesses the majority of features of the CSS. In other words, it’s used to define some configuration of UI

Wechat Development Tool

Using API

Here are many useful APIs and components provided by WeChat.

For my part, the map is very powerful to show a location marker and lead user to navigate it, and the API wx.showToast, wx.request and wx.makePhoneCall are very common to use.
It also includes many sample codes for each API, so we may go to the next part.

Cloud Development indtead of Backend Server

As we known, a backend server is usually in need if we want to load the data dynamically from a database，and it’s complicated to setup a backend server from nothing. I was depressed until I found the WeChat Cloud Development!

Currently the cloud base provided three basic capabilities:

  • Cloud function: code running in the cloud, WeChat private protocol natural authentication, developers only need to write their own business logic code
  • Database: A JSON database that can be manipulated both in the front end of the applet and in the cloud function.
  • Storage: upload/download cloud files directly at the front end of the applet, visual management in the cloud development console

The console is also easy to use,

  • Click the button named “Cloud Development” in Wechat Development Tool.
  • Create enviroment with your own account for your project.
  • Add data set for your own database if you want to maintain a database
  • Using Wechat Cloud API to do some operation for the database.

Wechat Cloud Console

[Icons](https://www.flaticon.com/)
[Pictures](http://588ku.com/)
[Latitude and longitude for Map](http://api.map.baidu.com/lbsapi/getpoint/index.html)
[How to get Music URL](https://blog.csdn.net/qq_38347669/article/details/81541845)

I’d like to thank the wechat team for the powerful framework here. Many thanks~
If you’re interested with my first mini program, you may scan below QR code or search “Wedding Invitation Lynettez” in Wechat.
Don’t be surprised, it is indeed an wedding invitation. :)

My First Mini Program

ESC