Wechat applet

Wechat applet release process

1. First, in the master Development tools upload code dev Environment

2. Experience version test

3.master The code environment becomes an online environment

4. Experience the applet of online environment , Online data , test

5. Submit audit

6. On the release management platform , take ischeck Change it to true, The purpose is to hide the content , Do not display... In the navigation bar ,（ Example , When you apply for a official account , Before you submit the soy sauce you want to sell , But you're online. You're selling wine , Such an examination will not pass , therefore , You don't sell alcohol after you submit it for review tab hidden ）

7. After passing the audit , Release the applet on the wechat management platform

8. Set audit status ischeck Change it to false

9. Then configure the applet management platform written by yourself , When updating an applet, is it mandatory or non mandatory , By passing a variable that is false still true

// app.js
App({
  env: "pro",
  onLaunch (options) {
    console.log(" Applet loading ",options)
    //  Cold start will execute 
    //  Hot start does not execute  
    //  Click on the top right corner to close the applet and click on the 30 Open again within minutes 
  },
  onShow (options) {
    console.log(" The applet shows ")
    const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  //  Call back after requesting new version information 
  console.log(" Is there an update ",res.hasUpdated)
})
 
updateManager.onUpdateReady(function () {
  const forceUpdate = false // From the interface , If it is false No forced updates 
  const isCheck = false  // Modify through the interface , Change to false, You can escape the audit 
  //  Business category   daily supplies    Tobacco and alcohol 
  if(forceUpdate) {
    updateManager.applyUpdate()
  return false;
  }

  wx.showModal({
    title: ' Update hints ',
    content: ' The new version is ready , Restart application or not ？',
    success(res) {
      if (res.confirm) {
        //  The new version has been downloaded , call  applyUpdate  Apply new version and restart 
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  //  New version download failed 
})
  },
  onHide () {
    console.log(" Applet hidden ")
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
    name: 123
  }
})

Note that the update request is usually written in onShow In the life cycle , Because in onLaunch In the life cycle , Only cold start can be triggered , Hot start does not trigger

route ：

wx.switchTab

Need to jump tabBar The path of the page ( Code package path )（ Need to be in app.json Of  tabBar  Page of field definition ）, The path cannot be followed by parameters . If not in tabBar The statement will report an error

wx.reLaunch

In app page path to jump ( Code package path ), The path can be followed by parameters . Use... Between parameters and paths ? Separate , Parameter key and parameter value = Connected to a , Use... For different parameters & Separate ; Such as 'path?key=value&key2=value2'

wx.redirectTo

Applications that need to jump tabBar And non tabBar Will do The path of the page ( Code package path ), The path can be followed by parameters . Use... Between parameters and paths  ?  Separate , Parameter key and parameter value  =  Connected to a , Use... For different parameters  &  Separate ; Such as 'path?key=value&key2=value2'

wx.navigateTo

In the app that needs to jump Not tabBar The page of The path of ( Code package path ), The path can be followed by parameters . Use... Between parameters and paths  ?  Separate , Parameter key and parameter value  =  Connected to a , Use... For different parameters  &  Separate ; Such as 'path?key=value&key2=value2'

Declarative navigation

<navigator open-type="switchTab" url="/pages/logs/logs"> Declarative navigation  switchTab</navigator>

event ：

  <view class="son" data-hehe="123" catchtap="clickSon" id="test">
//catchtap Events do not bubble by default 

Wechat payment process

  First, adjust the interface of our server at the front end , How much will you pay , To our server , I put the server to pre order , How much will it cost , And the order is sent to the wechat payment system , At this time, there will be a place to store this order in the wechat payment system , And return some parameters to our server , Our server returns these parameters to the applet , Small program passed wx.requestpayment() This interface , Carry the parameters returned from the server and send the money to the wechat payment system , The wechat payment system is putting money , With this order returned to our server , Our server performs some processing

localstonge

Small programs are stored in the foreground localstonge When , stay ios In the system , In the development version , Test version , And in the online version , their localstonge It's public.

terms of settlement ： It is to bring environment variables when saving and obtaining , Through environment variables , Take different environments and take the corresponding localstonge

function setStorage(key, value) {
  wx.setStorageSync(`${env}_key`, value) // here env Is the environment corresponding to the variable 
}

webview

webvie It is used to carry on the native H5 Web page , It is used in the original and h5 Communicate with web pages , For example, web pages can be attached to webview To call native app The function inside , For example, call the camera to scan the code , In the applet , When we are doing some activities , We can make these activities into a web page , Under the static resource directory of the attached server , Then in the applet through web-view To access the addresses of these events , The same can be done with user protocols

Example ： We started with 3001 The server created a h5 Webpage

 webview.html

Knowledge point : On the page, you can use  wx.miniProgram.postMessage Pass on the reference , Can be in webview adopt bindmessage event Accept the content and make changes

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Embedded webview Of html page </title>
    <script src="https://unpkg.com/[email protected]/dist/vconsole.min.js"></script>
    <script
      type="text/javascript"
      src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
    ></script> <!--  Wechat interface  -->
    <script>
      // VConsole  By default, it will be mounted to  `window.VConsole`  On 
      var vConsole = new window.VConsole();
    </script>
  </head>
  <body>
    <h1> Embedded webveiw</h1>
    <button id="login"> Please login again </button>
    <script>
      const url = "https://t7.baidu.com/it/u=1831997705,836992814&fm=193&f=GIF";
      document.getElementById("login").addEventListener("click", () => {
        wx.miniProgram.reLaunch({
          url: "/pages/my/my",
        });
      });
      // console.log(window.location);
      const search = window.location.search.split("?")[1] || "";
      //  Incomplete 
      const token = search.split("=")[1];
      console.log(token);
      wx.miniProgram.postMessage({ // adopt postMessage Pass on the reference 
        data: {
          title: " Ha ha Da ",
          imagePath: url,
          hehe: 123,
        },
      });
    </script>
  </body>
</html>

In the applet webview Inside

webview.wxml file

Knowledge point ： adopt bindmessage event Accept the content and make changes

<view>
<view> Show... In the applet h5 page </view>
<web-view bindmessage="receiveMessage" src="{
   {url}}"></web-view>
</view>

webview.js

Knowledge point ; adopt encodeURIComponent To analyze

Page({
  data: {
    url: ''
  },
  onLoad(options) {
    const url  = decodeURIComponent(options.url)
    console.log(url)
    this.setData({url})
    //wx.hideHomeButton({})
  },
  receiveMessage(e) {
    console.log(' Accept post Information ',e)
    const { title, imagePath } = e.detail.data[0] 
    console.log(title,imagePath)
    this.title = title,
    this.imageUrl = imagePath
  },
  onShareAppMessage() {
    return {
      title: this.title || ' Default share ',
      imageUrl:this.imageUrl || 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF'
      
    }
  }
})

In the activity page of the applet activelist.wxml

<view>
  <view> Activity list </view>
  <block wx:for="{
   {list}}" wx:key="index">
    <view data-url="{
   {item.url}}" data-login="{
   {item.isLogin}}" bindtap="jumpWebview">{
   {item.title}}</view>
  </block>
</view>

activelist.js

Knowledge point ： You go again webview To jump , There are two parameters carried ？, So we use encodeURIComponent To operate

Page({

  /**
   *  Initial data of the page 
   */
  data: {
    list: [{
      title:" Lucky wheel ",
      url:"http://www.baidu.com",
      isLogin: false,
    },
    {
      title:" Music player ",
      url:"http://ustbhuangyi.com/music-next/#/singer",
      isLogin: false,
    },{
      title: " Activities requiring login ",
      url:"http://localhost:3001/webview.html",
      isLogin: true,
    }]
  },
  jumpWebview(e) {
    console.log(e)
    const token = 'sdfmlskfjslfkjslfjkslkf'
    let {url, login } = e.target.dataset
    if(login) {
      url = `${url}?token=${token}`
    }
    console.log(login, url)
    
    wx.navigateTo({
      url: `/pages/webviewdemo/webview?url=${encodeURIComponent(url)}`,
    })
  }
})

summary ：

reason 1. Frequently changing pages   Activity page   Native applet development   The modification is complicated   No timeliness

reason 2. Some pages app And applets   The original cost is high   Make it h5 use webview bearing

1.webview  Show in applet h5 Webpage

2. Only the applet background is configured  webview  Only the business domain name can be used in the applet

3.h5 What should the page do ？

  *  Static page   User agreement  ->  Page builder

  *  User state

   Applet token  Pass to h5 Whether the page can be used ,

   Our available , Our user system has been connected with wechat   Mobile number login  , Password to login , Realize Association unification token You can use

 4. In built-in h5 The page finds the transfer of the applet token How to deal with failure

    Notify the applet to log in again

5. webview  Share the current page   The content to be shared should be embedded h5 The page decides

    stay h5 Page passing postmessage  Deliver custom shared content

    Small program through  bindmessage  Accept the content and make changes