Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to write a WeChat Mini Programs". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to write a WeChat Mini Programs"!

Demand

Mini Program voice recognition, panoramic picture viewing, login authorization, access to basic personal information

One: basic framework

Official development document: https://developers.weixin.qq.com/miniprogram/dev/ (in fact, the official document is very clear)

1. Step by step with the official documentation, just create a new Mini Program project.

two。 And then, after all, the default is only the basic skeleton, and the muscle lines still have to be filled out by themselves.

App.json is the current global configuration of Mini Program

All page paths, interface performance, network timeout, bottom tab of Mini Program

Requirement 1: bottom tab, like native APP, we need to have three resident buttons to switch pages

Just add the following code to the app.json file

Also, be sure to configure pagepath (page path)

"tabBar": {"color": "# cacaca", "selectedColor": "# f40", "borderStyle": "# fff", "backgroundColor": "# ffffff", "list": [{"pagePath": "pages/index/index", "text": "VR picture", "iconPath": "image/home.png", "selectedIconPath": "image/home_hover.png"} {"pagePath": "pages/voice/voice", "iconPath": "image/question.png", "selectedIconPath": "image/question_hover.png", "text": "VR Voice"}, {"pagePath": "pages/me/me", "iconPath": "image/mytb.png", "selectedIconPath": "image/mytb_hover.png" "text": "your VR World"}]}

Effect picture:

Demand 2: when you see someone else's Mini Program, you can customize the color at the top

As shown in the figure:

Easy to say, easy to say

Also insert the code in app.json, and the color is customized.

"window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# 458af1", "navigationBarTitleText": "VR World", "navigationBarTextStyle": "black", "enablePullDownRefresh": true}

Summarize the app.json configuration and refer directly to all the app.json configurations in the official documentation. General requirements can be met.

Requirement 3: to develop Mini Program, the user is generally authorized to log in, and then get the user's basic information, personal page

As shown in the figure:

1. Official api address: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

two。 Find the login interface

/ / app.jsApp ({onLaunch: function () {/ / Show local storage capacity var logs = wx.getStorageSync ('logs') | | [] logs.unshift (Date.now ()) wx.setStorageSync (' logs', logs) / / Log in to wx.login ({success: res = > {/ / send res.code to the backend for openId, sessionKey UnionId}}) / / get user information wx.getSetting ({success: res = > {if (res.authSetting ['scope.userInfo']) {/ / authorized You can directly call getUserInfo to get the avatar nickname without popping up wx.getUserInfo ({success: res = > {/ / you can send res to the backend to decode unionId this.globalData.userInfo = res.userInfo / / because getUserInfo is a network request May be returned after Page.onLoad / / so callback is added here to prevent this situation if (this.userInfoReadyCallback) {this.userInfoReadyCallback (res)})}})}, globalData: {userInfo: null}})

Requirement 3: what components are available in Mini Program?

In fact, this framework of Mini Program is very similar to vue, and it is easy to use.

Officially supported components

How to use, lift chestnuts, use swiper

3. How to use, hold chestnuts, use swiper rotation

Effect picture:

At this point, I believe you have a deeper understanding of "how to write a WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.