Wechat applet

1. Register wechat public platform and download wechat developer tools

1.1 register an account, download tools and create applets


AppID needs to be recorded

Create the first applet

1.2 release applet

For the applet developer tool, click "Upload" - submit the development version to the server - click "submit for review" - review version - Review in the server background. It takes about a week

It needs to be paid and 2 weeks should be reserved for deployment,

1.3 member management

You need to set up project members to complete the development of a small program by multiple people

1.4 allocate customer service personnel

1.5 development - development management - development settings

a. Record the AppID

Save the AppSecret (applet key) yourself

You can only regenerate at a time

b. ip whitelist can be set,

c. You can set the uploaded encryption key

d. Important: the server domain name needs to be set

request legal domain name * * * the legal domain name for obtaining data

socket legal domain name*

uploadFile legal domain name*

downloadFile legal domain name*

Note: only https or wss domain names can be set. ssl encryption layer is required

1.6 settings - third party settings - plug in management

All third-party plug-ins can be installed here

2. Directory structure of the created project

pages page

There are four files on the index home page

logs log page

utils public js file timestamp to date and time, encapsulating and obtaining data

Main entry file of app.js applet

Configuration file of the main file of app.json applet

Style of app.wxss main file

Configuration file for project.config.json project

sitemap.json site configuration file

3. To create a new page, 4 files need to be generated***


wxml is equivalent to html

wxss is equivalent to css

json configuration

The route of this page will be generated automatically by default in app.json

For example:

  "pages": [

4. Applet label*

view - div

text - span

image - img

block - template does not resolve to any tags, and is generally used for if for

5. Configure bottom navigation***


"pages": [
    "selectedColor": "#445356",
        "text":"home page",
        "selectedIconPath": "images/n-1.png"
        "selectedIconPath": "images/n-2.png"
        "selectedIconPath": "images/n-4.png"

Note: the bottom navigation can only have 2-5 items, otherwise an error will be reported

Small icons can only use local pictures

6. Page configuration

6.1 global page configuration

pages: Routing

tabBar: bottom navigation

window: Windows

The backgroundTextStyle needs to be configured as dark when the pull-down refresh is required

The name of the navigationBarTitleText applet

"networkTimeout": {
    "request": 10000,  Gets the expiration time of the data
    "downloadFile": 10000  Expiration time of downloaded files
  "debug": true   Do you want to display a prompt

6.2 page configuration of a page

 "navigationBarTitleText"  Page title
"usingComponents"  The name and address of the component used by the configuration
"enablePullDownRefresh" true Enable pull-down refresh 

7. Differences between applet and ordinary web page development***

1. Web development rendering thread and script thread are mutually exclusive; In the applet, the two are separated and run in different threads, DOM API and JSCore

2. The applet does not have a complete browser object, so it lacks relevant DOM API and BOM API

3. The execution environment is different, and the web page runs in the browser; The applet runs on the applet's server

4. The labels are different. The applet view text image block

5. The system permissions obtained are different. The applet can obtain mobile phone address book, camera, photos

6. The development cost is different, and the cost of applet development is lower

8. Differences between applets and native apps

1.app needs to be downloaded and installed, occupying mobile phone memory; Small programs do not need to be installed and run out

2. The promotion channels are different, and the applet relies on the basic users of wechat

3. The cost of small program development is low, and the cost of app development is very high

4. The app is faster than the small process, and the app can call more underlying APIs of the mobile phone

9. What is the principle of applet? How do applets work

The running environment of the applet is divided into rendering layer and logic layer, in which WXML template and WXSS style work in the rendering layer and JS script work in the logic layer.

The rendering layer and logic layer of the applet are managed by two threads respectively: the interface of the rendering layer uses WebView for rendering; The logic layer uses JsCore threads to run JS scripts. An applet has multiple interfaces, so there are multiple WebView threads in the rendering layer. The communication between the two threads will be transferred through the wechat client (Native will also be used to refer to the wechat client below), and the network requests sent by the logic layer will also be forwarded through native. The communication model of the applet is shown in the figure below.

10. wxml syntax

10.1 variables

You need to use {}} to render in wxml

To change the data in data, you need to use

this.setData({data name in data: new value to assign})

Wechat applet is a one-way data flow, and direct assignment will not trigger page update rendering

Same as react

10.2 list rendering for

a. Basic for

 <view class="item" wx:for="{{listArr}}">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>

b. key can be used in Wx: for loop

You can use the id number in the data

<view class="item" wx:for="{{listArr}}" wx:key="id">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>

Subscripts can be used

<view class="item" wx:for="{{listArr}}" wx:key="index">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>

You can also use * this

<view class="item" wx:for="{{listArr}}" wx:key="*this">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>

be careful:

When looping, the default item represents a row, and index represents the subscript of this row

When looping, you need to use key, otherwise an error will be reported. The key function is to uniquely identify one line to improve performance

c. Nested loop

wx:for-item by item Alias
wx:for-index by index Alias

d. When using a loop, you can write a loop in the block. The block does not need to be resolved to any label, reducing the label level

10.3 judgment conditions

  <view wx:if="{{num < 20}}">Data less than 20</view>
  <view wx:elif="{{num >20}}">Data greater than 20</view>
  <view wx:else>The data is equal to 20</view>

Note: it can also be used in the block tag

11 features of wxss

11.1 wxss has rpx unit, which can adapt to all mobile phone screens

The iPhone 678 is required for ui mapping,

If the drawing is double, the width is 750px,

The ratio of ui diagram to rpx is 1:1,

rpx is recommended for applets

11.2 app.wxss global style,

The page name. wxss style works only on this page

11.3 @import "style file name. wxss" import style

11.4 writing method of inline style:


12. Access to data

12.1 domain names with word order across domains need to be configured

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-movvjqfj-1635585528828) (E: \ 2021-07-26 \ 09 wechat \ day01 \ note \ images \ configuration. bmp)]

Document api network initiate request


onLoad: function (options) {
      url: 'https://www.51houniao.com/product/product/getProductRecommendUser',
        desc: false,
        orderBy: "top",
        pageNow: 1,
        pageSize: 20,
        seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
      //Request succeeded

13. Hook function

Get data in the hook function of onLoad

14. Use of modules


//Module output
module.exports = {


//Introduce encapsulated request
const fetch = require("../../utils/http");

15. What contents are encapsulated in the request encapsulation in the applet

  1. Basic api path
  2. Request mode, request path and request parameters
  3. Loading effect
  4. Using promise avoids callback hell
  5. module.exports is used for output, and require is introduced in the page

16. It should be noted that the applet uses the original old project

16.1 when importing an old project, you can use the test number. You need to draw a check mark in the developer tool - details - local settings - do not verify the legal domain name

16.2 for old projects, the version of the debugging basic library in the local setting needs to be reduced, otherwise an error will be reported

17. Events***

17.1 ordinary events


<button bindtap="testFun">Click trigger event</button>


 //Test function
    console.log("The function is running");

17.2 parameters to be transferred

wxml pass parameter data key = "value"

<button bindtap="testFun1" data-name="lili">Click to trigger the event and transfer the parameter</button>

js uses ev.currentTarget.dataset. * * to receive parameters


17.3 how does the input box receive data from wxml


<input type="text"  value="" bindinput="addFun"  />

js, you need to write ev.detail.value


17.4 event binding is divided into bubbling event binding bind * * *, and bubbling preventing event binding catch***

17.5 applet events

typeTrigger conditionMinimum version
touchstartFinger touch action starts
touchmoveMove after finger touch
touchcancelFinger touch action is interrupted, such as call reminder and pop-up window
touchendEnd of finger touch action
tapLeave immediately after touching your fingers
longpressAfter the finger is touched, it leaves after 350ms. If the event callback function is specified and this event is triggered, the tap event will not be triggered1.5.0
longtapLeave after finger touch for more than 350ms (it is recommended to use longpress event instead)
transitionendTriggered after WXSS transition or wx.createAnimation
animationstartTriggered at the beginning of a WXSS animation animation
animationiterationTriggered at the end of one iteration of a WXSS animation
animationendTriggered when a WXSS animation animation is completed
touchforcechangeOn iPhone devices that support 3D Touch, the restart time will be triggered1.9.90

Event triggered when a bindinput form is entered

Submit submit event

Scroll scroll event

18 hook function***

18.1 page hook function

onLoad page loading***

The first rendering of the onReady page is complete***

onShow display***

onHide hide***

onUnload page***

onPullDownRefresh drop-down refresh hook function*

onReachBottom pull-up load more*

Onshareaappmessage hook function triggered when sharing*

   * Life cycle function -- listening page loading can only be executed once
  onLoad: function (options) {
   * Life cycle function -- the listening page can only be executed once after the initial rendering is completed
  onReady: function () {

   * Life cycle function -- monitor page display and execute multiple times
  onShow: function () {

   * Life cycle function -- listening for page hiding
  onHide: function () {
   * Life cycle function -- listen for page unloading
  onUnload: function () {

   * Page related event handler -- listen to user drop-down actions
  onPullDownRefresh: function () {

   * Handler for bottom pull event on page
  onReachBottom: function () {


   * Users click the upper right corner to share
  onShareAppMessage: function () {


Hook function in App.js

attribute	type	Default value	Required	explain	Minimum version
onLaunch	function		no	Lifecycle callback -- listen for applet initialization.	***
onShow	function		no	Lifecycle callback -- listen for applet startup or foreground switching.	
onHide	function		no	Life cycle callback -- listen for the applet to switch to the background.	
onError	function		no	Error listener function.	  ***

19. Page route jump***

Routing modeTrigger timingPre routing pagePost route page
initializationThe first page the applet opensonLoad, onShow
Open new pageCall API wx.navigateTo Use components ``onHideonLoad, onShow
Page redirectionCall API wx.redirectTo Use components ``onUnloadonLoad, onShow
Page returnCall API wx.navigateBack Use components `` The user presses the return button in the upper left corneronUnloadonShow
Tab ToggleCall API wx.switchTab Use components `` User switch TabPlease refer to the following table for various situations
RestartCall API wx.reLaunch Use components ``onUnloadonLoad, onShow

19.1 jump to tabbar page. Note: parameters cannot be passed

Jump to the page show, other pages hide



<navigator open-type="switchTab" url="/pages/index/index">Jump to home page</navigator>

19.2 navigateTo jump

Can't jump to tabbar

The page you jump to has a return button. The essence of the page is displayed and hidden. It will not be unloaded or reloaded

The pages of navigateTo can be returned using navigateBack

19.3 redirectTo jump

You cannot jump to tabbar. There is no return button on the jump page. The page will be unloaded when you jump and needs to be reloaded when you come back

19.4 reLaunch jump

You can jump to any page and transfer parameters. The performance is slightly worse than the previous ones

20 transfer parameters between pages***

20.1 transmitting parameters during route jump

A: Transfer parameters

      url: '/pages/add/add?id='+this.data.userid,

B: Receive parameters using the parameter options in onLoad

  onLoad: function (options) {

20.2 modular parameter transmission

A: Output:

//Module output
module.exports = {

B: Introduction:

//Introduce encapsulated request
const fetch = require("../../utils/http");

20.3 passing parameters using globalData

Defined in App.js

 globalData: {
    userInfo: null,
      'Gourd baby','Bumblebee','Tota Li Tianwang'

Use on other pages

//Introducing App.js
const app = getApp();

//Use global variables defined in app

20.4 caching can be used***

A: Set cache information

//Call synchronization to set cache information
    wx.setStorageSync('userSto', this.data.user)

B: Get cache information


Difference between applet cache and web page cache:**

  1. The web page has localStorage and sessionStorage; Applet has only Storage
  2. The data stored in the web page cache is a string. When the data goes in and out, it needs to be serialized and deserialized JSON.parse and JSON.stringify; Objects or arrays can be stored directly in the applet's cache

21. Template use of applet

21.1 foundation formwork

Create template file


<!-- Template for recommended data -->
<template name="listtuijian">
<view>I am the template content</view>

Use template

<!-- 1.Import template -->
<import src="/templates/listtuijian/listtuijian.wxml" />
  <!-- 2.Use template -->
  <template is="listtuijian"></template>

21.2 template transfer parameters

Create template file


<!-- Template for recommended data -->
<template name="listitem">
<view wx:for="{{tuijianArr}}" wx:key="index">

Use template

<import src="/templates/listtuijian/listitem.wxml" />
  <template is="listitem" data="{{tuijianArr}}"></template>

21.3 include can import the whole code of the object file except < template / > < WXS / >, which is equivalent to copying to the include location

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

22. wxs

WXS (WeiXin Script) is a script language for small programs. Combined with WXML, the structure of pages can be constructed.

wxs uses js content in wxml pages

Create a wxs


var msg = "hello wxs";
module.exports.msg = msg;


<!-- introduce wxs -->
<wxs src="./listwxs.wxs" module="lw"/>

23. Simple two-way binding in applet

The applet defaults to one-way data flow, and the supported writing method is

<input module:value="username" />

Expressions used for bidirectional binding have the following limitations:

  1. Can only be a single field binding, such as
<input model:value="Value is {{value}}" />
<input model:value="{{ a + b }}" />

Are illegal;

  1. At present, the data path, such as
<input model:value="{{ a.b }}" />

Such expressions are not currently supported.

24 get node information on the interface

const query = wx.createSelectorQuery();
      console.log(res);//Width, height and distance from top, bottom, left and right

25 use of animation


<button bindtap="changeview">Click to animate</button>
<view id="con" class="con">animation</view>


.con{width: 100px; height: 100px; border:2px solid blue;}



      console.log("The animation is over");

26. Initial rendering cache,


  • Quickly display the parts of the page that will never change, such as the navigation bar;
  • Display a skeleton page in advance to improve the user experience;
  • Display customized loading tips;
  • Display advertisements in advance, etc.

Static initial rendering cache

The easiest way to enable the initial rendering cache is to add the configuration item "initialRenderingCache": "static" in the json file of the page:

  "initialRenderingCache": "static"

27. Cold start and hot start of applet

In this way, applet startup can be divided into two situations: cold startup and hot startup.

  • Cold start: if the user opens it for the first time, or if the applet is opened again after it is destroyed, the applet needs to be loaded and started again, that is, cold start.
  • Hot start: if the user has opened an applet and then opens the applet again within a certain period of time, the applet is not destroyed, but enters the foreground state from the background state. This process is hot start.
  • When to cold start:
  • 1. First use of applet
  • 2. The applet has not been used for a long time
  • 3. Continuously prompt that the memory is insufficient, receive the system memory warning, and the applet is actively destroyed
  • 4. The applet is releasing a new version
Applet destruction timing

Usually, only when the applet enters the background for a certain time, or the system resources are occupied too much, it will be destroyed. Specifically, it includes the following situations:

  • When the applet enters the background, it can maintain the running state for a short period of time. If it does not enter the foreground within this period of time, the applet will be destroyed.
  • When the applet occupies too much system resources, it may be destroyed by the system or actively recycled by the wechat client.
    • On iOS, when the wechat client continuously receives the system memory alarm within a certain time interval, it will actively destroy the applet according to certain strategies and prompt the user to "run out of memory, please reopen the applet". Specific strategies will be continuously adjusted and optimized.
    • It is recommended that applets be used when necessary wx.onMemoryWarning Monitor memory alarm events and clean up memory as necessary.

28. Components***

28.1 basic custom components

a. Create component


// components/logcom/logcom.js
   * The property list of the component, which receives the value passed from the parent component
  properties: {

   * The initial data of the component, and the data of the component itself
  data: {
   * Component method list
  methods: {



  "component": true,
  "usingComponents": {}


<text>I am a newly defined subcomponent</text>


b. Use the newly created component on the log page


  "navigationBarTitleText": "View startup log",
  "usingComponents": {



Note: the component name is hump type. When used in wxml, it needs to be written as middle dash

Other custom components can be used in custom components

The root directory name of the project where the custom component and page are located cannot be prefixed with wx -, otherwise an error will be reported

28.2 transfer of component parameters from parent to child***

New component


// components/logtest/logtest.js
   * List of properties for the component
  properties: {

   * Initial data of components
  data: {


   * Component method list
  methods: {



  "component": true,
  "usingComponents": {}


<text>Components with parameters{{username}}</text>

<view>Hero list</view>
<view wx:for="{{hero}}" wx:key="index">{{item}}</view>

Used in the page of log


  "navigationBarTitleText": "View startup log",
  "usingComponents": {


<!-- Use parametric components -->
<logtest username="{{username}}" hero="{{hero}}"></logtest>

28.3 child parent of widget component

In subcomponents


<button bindtap="changeNum">Click to transfer the data of the child component to the parent component</button>


// components/logcom/logcom.js
   * The property list of the component, which receives the value passed from the parent component
  properties: {


   * The initial data of the component, and the data of the component itself
  data: {

   * Component method list
  methods: {
      var myEventDetail = {num:this.data.num};//The parameter to be passed to the parent component
      var myEventOption = {};//Configuration item when the event is triggered
      //Auto trigger custom events for subcomponents

In parent component:


<logcom bind:myevent = "parentFun"></logcom>


    console.log("Value received by parent component",data.detail.num);

Summary: the child component triggers a custom event, binds a function to the custom event in the parent component, and receives the value passed from the parent component in the function.

28.4 slots in assemblies

Parent component

<logcom bind:myevent = "parentFun">
  <text>There is no grass anywhere in the world</text>



If a named slot is required,

  options: {
    multipleSlots: true // Enable multi slot support in the options at the time of component definition
  properties: { /* ... */ },
  methods: { /* ... */ }

28.5 life cycle of custom components

  lifetimes: {
    attached: function() {
      // Execute when the component instance enters the page node tree
    detached: function() {
      // Executes when a component instance is removed from the page node tree
  // The following is an old-fashioned definition method, which can maintain compatibility with the < 2.2.3 basic library
  attached: function() {
    // Execute when the component instance enters the page node tree
  detached: function() {
    // Executes when a component instance is removed from the page node tree
  // ...
life cycleparameterdescribeMinimum version
creatednothingExecute when the component instance has just been created1.6.3
attachednothingExecute when the component instance enters the page node tree1.6.3
readynothingExecute after the component is laid out in the view layer1.6.3
movednothingExecuted when the component instance is moved to another location in the node tree1.6.3
detachednothingExecutes when a component instance is removed from the page node tree1.6.3
errorObject ErrorExecute whenever a component method throws an error2.4.1

28.6 behaviors are similar to the mixin of vue or react high-order components

behaviors are features used for code sharing between components, similar to "mixins" or "traits" in some programming languages.

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data and methods will be merged into the component, and the life cycle function will be called at the corresponding time.

Define the file of behaviors first

module.exports = Behavior({
    name:"hello mr"
      console.log("behavior It's running");
    console.log("behavior The hook is running");

When using, first import and then configure

//Introduce behavior
+ const  myBehavior = require("./myBehavior.js");

//Introducing App.js
const app = getApp();
 + behaviors: [myBehavior],
  data: {
    logs: [],
    hero:["day lily","stand upon one's pantofles","Chinese Dragon"]

29. Using plug-ins

  1. Find and configure the plug-in on the server side

    Background - Settings - third party services - plug-in management, add plug-ins,

  2. Introducing plug-ins


    "plugins": {
        "DimensionalShow": {
          "version": "1.0.2",
          "provider": "wx0f253bdf656bfa08"
  3. Page configuration plug-in components used

  4. Paste the corresponding content in js and wxml of the page

30 applet subcontracting

The size of the package cannot exceed 2M, and there can be at most 10 subcontracts. The total size of the applet cannot exceed 20M

When you build an applet subcontract project, the build outputs one or more subcontracts. Each applet that uses subcontracting must contain a main package. The so-called main package is to place the default startup page / TabBar page, and some public resources / JS scripts are required for all subcontracts; Subcontracting is divided according to the configuration of developers.

When the applet is started, the main package will be downloaded by default and the page in the main package will be started. When the user enters a page in the subcontract, the client will download the corresponding subcontract and display it after downloading.

Packaging principle

  • After declaring the subpackages, they will be packaged according to the subpackages configuration path, and the directories outside the subpackages configuration path will be packaged into the app (main package)
  • app (main package) can also have its own pages (that is, the outermost pages field)
  • The root directory of a subpackage cannot be a subdirectory within another subpackage
  • The tabBar page must be in the app (main package)

Citation principle

  • packageA cannot require packageB JS files, but can require app and JS files in its own package; use Subcontract asynchronization It is not subject to this restriction

  • Package a cannot import the template of package B, but it can require app and the template in its own package

  • Package a cannot use the resources of package B, but can use the resources in app and its own package

  • Independent subcontracting

  • Subcontract pre Download

  • Subcontract asynchronization

31 login process of applet

1. On the applet side, call wx.login to get the code***

2. Use wx.request to call the login interface of your own company's server and pass the code***

3. In the background of the company, the APPID, secret key, code and openid will be verified. If the login is successful, the server database in the background of the company will be called to indicate that the login is successful, and the data of successful login will be returned to the foreground.

4. The foreground needs to save the returned data of successful login to the cache***

5. When obtaining other data, you can bring the login status to the past

6. After logging in, you generally need to obtain user information and use the API of applet wx.getUserProfile to obtain user data

7. If the e-commerce website requires you to fill in your mobile phone number, it will automatically trigger the background interface to associate your wechat id with your mobile phone number

8. When logging in for the first time, it is actually a registration operation in the background; Every other time is a login operation

32 payment of applet

32.1 application for applet payment

Before calling Applet wechat public platform -Function - wechat payment portal application for access to wechat payment

32.2 associated merchant number

The id secret key of the merchant number is used to encrypt the file

32.3 the server needs to configure basic functions such as signature generation, signature verification, encryption / decryption of sensitive information and media file upload to verify whether the merchant number can pay normally

32.4 payment process:

a. Confirm the login status. If you have already logged in, save the login information

b. Use wx.request to call the background interface and pass the token and openid to the background

c. Configure * * signature generation, signature verification and sensitive information encryption / decryption on the server to generate timestamp, random string and signature information. Return to the applet side.

d. The client calls the background interface to generate the order, order number, total price and commodity information.

e. Call wx.requestPayment(). Pull up wechat payment, the payment is successful, the successful information is returned, and the page jumps to the consignment page; If payment fails, a prompt of failure will be returned. The page jumps to the unpaid order page.

Note: reasons for payment failure: possible, signature error, order confirmation failure during payment, abnormal payment parameters, payment timeout...

33. Applet optimization***

33.1 reduce first screen rendering time

Paging processing, touch the bottom to load the next page

Page cache

Initial render cache

Reduce the use of pictures,

33.2 reduce package size

Use components, use templates, encapsulate public content, modularize, and use behavior

Use network pictures to reduce the use of this map

Clear comments and unnecessary code before uploading

33.3 reduce the use of data and setData

33.4 subcontract loading for applet can also use subcontract preloading and independent subcontracting

33.5 it is a skeleton screen. When the network speed is relatively slow, the frame is displayed first

33.6 consider using anti shake throttling, such as text boxes and scrolling events

34 how does the page in WebView jump back to the applet?

First, you need to reference a js file in your html page.

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

Then register a click event for your button tag:
wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})

The redirectTo () here is the same as the wx.redirectTo() page Jump in the applet. It will close the current page and jump to the page.

You can also replace it with navigateTo. Jumping to the page will not close the current page.

  1. The applet jumps to the h5 page

The domain name of h5 needs to be configured in the applet background

Only authenticated users can use it

 <web-view src="https://Domain name "> < / Web View > 

3. The applet jumps to another applet

path: '/pages/index/index',
envVersion: 'trial',
extraData: {
openId: '123'    //The data that needs to be passed to the target applet. The target applet can obtain this data in App.onLaunch and App.onShow

35 what should I pay attention to when using webview to load directly?

A: first, you must use the administrator to add the business domain name in the background of the applet;

2, The script to jump to applet on h5 page must be above 1.3.1;

3, Wechat sharing can only be the main name of the applet. If you want to customize the shared content, you need to have the applet version above 1.7.1;

Four, h5 payment can not be appid of WeChat official account, it must be appid of small program, and openid of users must also be user and applet.

Please talk about the comparison of native development applet, wepy and mpvue?

  • Personally, if it is a new project and there is no old h5 project migration, consider using the native development of small programs, which has the advantage of fewer pits compared with the third-party framework.
  • If some old h5 projects are developed by vue or some h5 projects also need applet development, it is more suitable for wepy or mpvue to migrate or develop. Recently, wepy is almost not updated, so meituan's mpvue is not maintained.
  • If the front end of the team is strong, it is no problem to make a framework by yourself.

Uni app is recommended


37. What problems does the applet encounter when calling the background interface?

① If the size of the data exceeds the limit, the entire applet will crash unless the applet is restarted;

② The applet cannot directly render the html text of this type of article content, and the display needs the help of plug-ins

Note: the plug-in rendering will slow down the page loading. It is recommended to filter the html of the article content in the background, directly process in the background, and replace the p tag div tag with the view tag. Then let the plug-in do other tags.

Keywords: Mini Program

Added by tonyw on Sat, 30 Oct 2021 11:38:40 +0300