WeChat small program development embedded H5 development experience

Entrusted by a friend to a company to develop WeChat small program. It was originally developed in a native way, and half of it was developed, but the client required H5 development, so the UNIAPP development framework was selected. No previous WeChat applet development experience; It is basically to the document, to baidu step by step development, so it is necessary to summarize

First, preparation in advance

(1) Application for small program APPWeChat public platform address; The basic is to Tencent requirements to fill in the audit

(2) Select WeChat AppID. Development Management Options -> Development Settings

(3) Download WeChat developers can download according to their own system conditions

II. Development work

1, small program development

Use the WeChat developer tool to create a new project and enter the APPID of the application
Modify the WeChat applet name and interface configuration

Development specifications and documentation refer to the official documentation

The previous version was authorized with UserInfo, and the updated version is authorized with GetUserProfile. Attach the code index.wxml. The template part of the code

<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <! -- <image src='/images/wx_login.png'></image> --> <icon class="icon-box-img" type="waiting" size="93"></icon> </view> <view class='content'> <view> </view> <text> </text> </view> <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" BindTap ='bindGetUserInfo'> Authorize login </button> </view> <view wx:else> Please upgrade WeChat version </view> </view>

JS code mainly uses GetUserProfile, GetStorageSync, Login syntax

Var App = getApp() Page({data: {// Check if API, callbacks, parameters, components, etc. are available in current version of applet. }, onLoad: function () {var that = this;}, onLoad: function () {var that = this; if (wx.getUserProfile) { this.setData({ canIUse: true }) } var user = wx.getStorageSync('user') || {}; var userInfo = wx.getStorageSync('userInfo') || {}; App.globalData.userInfo = userInfo; // Cache user information app.globalData.userid = user.id; // UserID console.log(' cached data ', user, userInfo) // Not taking message if (user.id && userinfo.rawdata) {wx.navigateTo({url: "/pages/webview/index" }) // that.setData({ // isHide: false // }); // this.login(); } else { that.setData({ isHide: true }); } // // Check for authorization // wx.getSetting({// success: function (res) { // if (res.authSetting['scope.userInfo']) { // wx.getUserProfile({ // success: function (res) { // App.globalData.userInfo = res; // // User has been authorized, do not need to display the authorization page, so do not need to change the value of isHide: "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" //} else {// // user does not have permission to change the value of isHide, display the authorization page // that.setData({// isHide: true //}); //} //}); }, bindGetUserInfo: function (e) {// Debugger wx.getUserProfile({desc: 'Authorized login ', // declare the purpose of obtaining the user's personal information, which will be shown in the popup later, please fill in the success carefully: (res) => {app.globalData. userInfo = res; wx.setStorageSync('userInfo', res); this.setData({ isHide: false }); This. login()}, fail: () => {wx.showToast({title: 'This applet was denied, please authorise to enter again ',icon:'none'}); }})}, login() {wx.login({success: res => {// get user's code: res.code console.log(" user's code:" + res.code); Wx. request({// make up your own AppID and SECRET // url: // make up your own AppID and SECRET // url: 'his own APPID&secret = https://api.weixin.qq.com/sns/jscode2session?appid= SECRET&js _code =' + res. Code + '&grant_type=authorization_code', url: 'xx', method: "post", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { code: res.code, rawData: App.globalData.userInfo.rawData, secret: "f0a0818475ccd078edbcfde23a6bb02e", appId: "wx356c577df5a82dff" }, success: Res => {// Get user's openID console.log(" User's openID :" + res.data.result.id); App.globalData.userId = res.data.result.id; wx.setStorageSync('user', res.data.result); this.setData({ isHide: false }); wx.navigateTo({ url: "/pages/webview/index" }) } }); }}); }})

5. Component development and reference

(1) The external component introduced in the project refers to vant-UI

Download and install to the specified location

(2) Develop components

(3) Component usage

(4) Development syntax, please refer to the VUE development ideas of data transfer, listening, event sending, event listening

6. How does the WebView communicate (by passing parameters)

7. How to introduce plug-ins (simultaneous interpretation)

8. Code upload and deployment

2. H5 development

1. Download the H-Builder development tool

2. Initialize the project

H5 and other interface differentiation development is utilized# if wayConditional processing

3. Configure the H5 interface, mainly about the interface configuration, such as Tabar, Topbar, page title. The color bar, background, and font are basically similar to the WeChat native syntax configuration

4. For the QQ map used in the configuration map (Marker, Polyline, Positioning, Hierarchy), it is necessary to apply for the developer’s key in QQMap in advance; It is then introduced as a script tag

code

InitPolyline (map) {// Initialize uncertain this.unsurePolylines.map (item => {let points = item.points.split(";"); ).map(pstr => { return{ latitude:pstr.split(",")[0], longtitde:pstr.split(",")[1] } }); let path = points.map(p => { return new qq.maps.LatLng(p.latitude, p.longtitde) }) let max = this.getMaxLatitude(points); this.initLable({... max,name:item.name}); var polyline = new qq.maps.Polyline({ path: path, strokeColor: '#38E9EB', strokeWeight: 5, name: Item. The name | | "test line 2," strokeDashStyle: "the dash", the editable: false, map: the map}); qq.maps.event.addListener(polyline, 'click', (res) => { alert(res.target.name) }) }) this.surePolylines.map(item => { let points = item.points.split(";" ).map(pstr => { return{ latitude:pstr.split(",")[0], longtitde:pstr.split(",")[1] } }); let path = points.map(p => { return new qq.maps.LatLng(p.latitude, p.longtitde) }) let max = this.getMaxLatitude(points); this.initLable({... max,name:item.name}); var polyline = new qq.maps.Polyline({ path: path, strokeColor: '#38E9EB', strokeWeight: 5, name: Item. The name | | "test line 2," the editable: false, map: the map}); qq.maps.event.addListener(polyline, 'click', (res) => { alert(res.target.name) }) }) // var path2 = points.map(item => { // return new qq.maps.LatLng(item.latitude, item.longitude) // }) // var path1 = points1.map(item => { // return new qq.maps.LatLng(item.latitude, item.longitude) // }) // var max1 = this.getMaxLatitude(points1); // this.initLable(max); // this.initLable(max1); // var polyline = new qq.maps.Polyline({ // path: path1, // strokeColor: '#38E9EB', // strokeWeight: 5, // name: "Test line 2", // Editable: false, // map: map //}); // var label1 = this.getMaxLatitude(points); // var polyline1 = new qq.maps.Polyline({ // path: path2, // strokeColor: '#E3C395', // strokeWeight: 5, // editable: False, // strokedashStyle: "dash", // name: "test line 1", // map: map //}); // qq.maps.event.addListener(map, 'click', function(res) { // // debugger // }); // qq.maps.event.addListener(polyline, 'click', (res) => { // alert(res.target.name) // }) // qq.maps.event.addListener(polyline1, 'click', (res) => { // alert(res.target.name) // }); }, // initMakers(map) {this.areapoinints. Map (item => {var latitude = item.center. Split (",")[0]; var longtitde = item.center.split(",")[1]; var marker = new qq.maps.Marker({ icon: icon1, map: map, name:item.name, position: new qq.maps.LatLng(latitude,longtitde) }); this.initLable({... item,latitude:latitude,longtitde:longtitde}); qq.maps.event.addListener(marker, 'click', (res) => { alert(res.target.name) }) }) }, Var cssC = {color: "# FFF ", fontSize: "12px", fontWeight: "# FFF "; var cssC = {color: "# FFF "; "bold", background: "#3a3d56", borderRadius: "10px", border: "none", padding: "4px 10px" }; Var label = new QQ.maps.Label({true, clickable, true); Clickable: true, // The text of the tag. Content: the item name | | "22", / / show the label of the map. map: this.map, offset: new qq.maps.Size(-25, -40), position: new qq.maps.LatLng(item.latitude, item.longtitde), style: cssC, visible: true, zIndex: 1000 }); },

5, picture gestures zoom in and out

6. Component introduction

The component introduction of VUE syntax

7, packaging,

8. Nginx deployment

After the code is published using Uniapp, select the server, configure NGINX, and configure the domain name for HTTPS

WeChat small program development embedded H5 development experience