Summary of considerations for native applet development

Write it at the front

Originally, it was the process of preparing the small program development and some API Make a summary and record , By the way, explain the pit inside , But I checked the posts written by others and official documents , I don't think it's meaningful for me to write repeatedly , Waste your time and your readers' time , So this article mainly summarizes the pitfalls that are easy to appear in the process of small program development , I'll start at the entrance , Try to explain the problems and pitfalls that may occur in the process of small program development , Because my reference is 《 Applet 、 Skillfully apply 》 The second edition of this book , So there are some differences with the official website. Please pay attention to , Thank the author for providing a very authoritative book as a reference ！

Article ideas

The article will list the holes that bloggers think one by one , Whether it's a big pit or a small pit , Whether it's bug Or precautions , Enumeration of urban meanings , For each description, I try to implement one as much as possible Demo demonstrate , Unless the functions involved in this function are complex and not suitable for a Demo Demonstrated , I will try my best to make it clear

Applicable people

• Web The front-end development
• Applet development
• vue Development
• js Development
• h5 Development

matters needing attention 1 - Initial page setup

• Array of The first one is Used to set the initial page of the applet , That is, the startup page of the applet , That is, you want that one to be the startup page , Just adjust his position in the array
• Add... To the applet / Reduce pages , All must be right pages Modify the array accordingly , If you do not modify it, you will directly compile it and fail
• The file name does not need to be suffixed , The applet itself will find the file corresponding to the path .json etc.

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

matters needing attention 2 - window To configure

• backgroundTextStyle The value of only supports dark/light
• navigationBarTextStyle The value of only supports back/white

Many developers here like to use RGB Or hexadecimal values to represent colors , Other properties can , The top two are not good

"window":{
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " Applet development considerations demonstration ",
    "navigationBarTextStyle":"black"
  },

matters needing attention 3 - networkTimeout To configure

• This is not required , Can not be set , If not set , The default is to use the operating system kernel or follow the server WebServe Set up , The unit is ms

 "networkTimeout": {
    
      "request": 3000,
      "connectSocket": 3000,
      "downloadFile": 3000,
      "uploadFile": 3000
  }

matters needing attention 4 - page.json

• Priority issues , Every native wx Each applet has four files , One of them is index.json file , This file corresponds to windows Configuration is app.json Medium window, however index.json It can only be configured with window Properties of , So you don't have to write window, His priority is higher than app.json Of window

//index.json  Different structure , Priority is higher than... Below app.json
{
    
  "navigationBarTitleText": " View startup log ",
  "usingComponents": {
    }
}
//app.json 
 "window":{
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " Applet development considerations demonstration ",
    "navigationBarTextStyle":"black"
  },

matters needing attention 5 - The front desk 、 backstage 、 The destruction

When the current user interface is running or operating the applet, it is the foreground 、 When the user clicks "close" in the upper left corner or presses the "close" button on the device Home Key left wechat , The applet is not directly destroyed at this time , It's backstage , When you open wechat or applet again , And into the front desk

Only when the applet enters the background for a period of time or the system resources are occupied too much , Will be truly destroyed , This represents the end of the life cycle of the applet （ Those who do not understand the life cycle can search and understand by themselves ）

matters needing attention 6 - App()

• App() Method must be registered in app.js in , And only one can be registered
• Don't define App Call inside function getApp(), direct this I can get it App example
• adopt getAPP() After obtaining the instance , Do not call lifecycle functions without permission

//other.js
let instanceApp = getApp()
console.log(instanceApp) // Get App example 

//app.js
 globalData: {
    
        userInfo: null,
        testInfos: "this is csdn test infos"
    }
onLaunch() {
    
        console.table(this.globalData)
    },
// Print the results ： 
Value
userInfo	null
testInfos	"this is csdn test infos"

matters needing attention 7 - getCurrentPage()

• Do not be onLaunch Call when operating getCurrentPages(), Because the page Not yet generated

// correct   Some information about the current page will be printed 
onReady() {
    
        let currPage = getCurrentPages()
        console.trace(currPage)
    },
// error   He won't make a mistake , But one will print out []
onLaunch() {
    
      console.log(getCurrentPages())
  }     

matters needing attention 8 - Hook function description

onLoad The initialization operation performed when the page is loaded

• A page can only be called once
• Parameters can be obtained wx.navigateTo and w x.redirectTo And parameters in

onShow It will be executed when the page is displayed , That is to say, every time you open it, you will call

onReady This is the operation to be performed when the page is first rendered

• A page can only be called once , It means that the page has been loaded , Can interact with view layers
• Make changes to the page setNavigationBarTitle Set up

onHide It is the operation performed when the page is hidden ,navidateTo Or bottom Tab Trigger when switching

onUnload The operation performed when the page is written in ,redirectTo perhaps navigateBack Called when

matters needing attention 9 - onShareAppMessage

• Only if this event handler is defined , The menu in the upper right corner of the applet will display “ Share button ”, Otherwise, it will not be displayed

matters needing attention 10 - globalData

• app.js The global parameters in are independent of each other in different files , You can declare a and in your own separate file app.js Variables with the same name in
• A file in the global properties has been changed , The value of this global attribute will be changed globally

//index.js  home page 
 app.globalData.testInfos = "update testInfos"
 console.log(app)
// Output results 
testInfos: "update testInfos"
userInfo: null

//mine.js  My page 
console.log(app)
// Output results 
testInfos: "update testInfos"
userInfo: null

matters needing attention 11 - wx Function name

• wx.on At the beginning API Generally, it is used to monitor the occurrence of an event API Interface , Take a callback function as an argument , When the event is triggered , The callback function will execute
• wx. Without any agreement API（ such as ：wx.request） All accept one ONJECT As a parameter
• OBJECT You can specify success、fail、complete To receive the call result of the interface

matters needing attention 12 - block

• Packaging elements , Only accept control properties , No rendering in the page , It can be understood as template Usage of , So don't set the style on it

matters needing attention 12 - wx:for

Why do you pull it out here to say the traversal thing ？ It's because he and some of our common for There are some differences in the loop , So many people use wx It is written directly during development, but the value cannot be obtained , Here is a simple record of , Don't be fooled by grammar

• wx:for-item: You can get the variable name of the current element of the specified array

• wx:for-index: Can get the variable name of the current subscript of the specified array

matters needing attention 13 - Bubbling event

What is bubbling ： When clicking an event on a component , The phenomenon that this event is passed to the parent node

• wx There are only six bubbling events

touchstart、touchmove、 touchcancel、touchend、tap、longtap

• touchstart ： Finger touch
• touchmove: Move after finger touch
• touchcancel： Finger touch is interrupted （ Phone call 、 Pop-up, etc. ）
• touchend： End of finger touch
• tap： Touch your fingers and leave
• longtap： After touching the fingers , exceed 350ms Leave again

bind Event binding does not prevent events from bubbling up , however catch Event binding can prevent events from bubbling up

canvas There will be no bubble event in the event

matters needing attention 14 - wxss

• wxss Local resources are not available , So the styles in wechat are all network pictures or base64

• @import The relative path of the imported outreach style should be followed

• Partial selectors are not available

:disabled、:enabled、:checked、 Cascading style (wx I think it will destroy the structure of the components )

matters needing attention 15 - Design draft size

750 It's a standard design , If not 750 The design of , A conversion is required , such as 640 The design of , Need to carry out 1rpx = 640/750 But because wxss Arithmetic operators... Are not supported in , So try to use the design draft of the small program 750 Design

matters needing attention 16 - Frame components

• All components and attributes of the applet need to use lowercase characters

matters needing attention 17 - Component defaults

• Small program image、video、canvas The default width and height are 300 * 225px Value

matters needing attention 18 - wx label

• text

This tag is pulled out alone because it is the only one that can long press the selected text , And he doesn't support nesting

• image

  He is not strictly speaking image label , That means he and we html Medium img It's not the same thing , You can think of it as a view Background map , The default setting is background-size：100% 100% nothing more , So he offered 12 An adjustable mode

• icon

    <icon type="success_no_circle"></icon>
    <icon type="success"></icon>
    <icon type="info"></icon>
    <icon type="warn"></icon>
    <icon type="waiting"></icon>
    <icon type="cancel"></icon>
    <icon type="download"></icon>
    <icon type="search"></icon>
    <icon type="clear"></icon>

matters needing attention 19 - API

• The applet can only communicate with the specified domain name , Each small program needs to set the communication domain name in advance
• A wechat app , At the same time, there can only be 5 Network request connection
• A wechat applet can only have one websocket Connect , If one already exists , Will automatically close the connection , Create a new websocket

matters needing attention 20 - cache

• localStorage Is permanently stored locally , However, it is not recommended to store critical information locally , First, unsafe , The second is that once the user changes the equipment , You can't get

Notes 21 - getLocation

//  Type a wgs84/gcj02
wx.getLocation({
    
            type: "wgs84",
            success: function (res) {
    
                console.log(res)
            }
 })
// gcj02  The return is wx.openLocation Longitude and latitude of   But here I use wgs84  It's fine too   Do not clear the specific reasons 

• Open the map

// You can open the map of the current location  
wx.getLocation({
    
            type: "gcj02",
            success: function (res) {
    
                console.log(res)
                wx.openLocation({
    
                  latitude:res.latitude,
                  longitude:res.longitude,
                  scale:28
            })
        }
})

matters needing attention 21 - showActionSheet

• open a menu - It can only be Single color Change and use of **#000** This color value is set The array should not exceed 6 individual , Not for Number type

 wx.showActionSheet({
    
            itemList: ["a", "b", "c"],
            itemColor: "#f40",
            success: function (res) {
    
                console.log(res)
            }
  })
//itemList: ["a", "b", "c", "e", "f", "g", "h"], exceed 6 It won't show 

matters needing attention 22 - Page Jump

wx.navigateTo have access to wx.navigateBack()  Go back 
wx.redirectTo Not available wx.navigateBack()  Go back  
wx.navigateTo and wx.redirectTo  You cannot jump to tabbar The page of 
 Only use wx.switchTab Jump to tabBar

matters needing attention 23 - Animation

<view animation="{
     {animationData}}" class="s-ani"></view>
<button bindtap="startAnimation" type="primary"> Start the animation </button>

/** *  Every animation needs to be done export()  Assigned to page binding elements  * step  Every time step The front can be a lot of animation ,animation.scale(2, 2).rotate(45).step() *  But it will be executed at one time   If you want to do it separately , Just write two steps  **/
startAnimation() {
    
        let that = this
        let animation = wx.createAnimation({
    
            delay: 0,
            duration: 1000,
            timingFunction: 'ease'
        })
        this.animation = animation
        animation.scale(2, 2).rotate(45).step()
        this.setData({
    
            animationData: animation.export()
        })
        setTimeout(()=>{
    
            animation.translate(30).step()
            that.setData({
    
                animationData:animation.export()
            })
        },3000)
    },

matters needing attention 24 - Template message

• After successful payment, only one template message can be sent at a time , Multiple payments and each distribution are independent of each other
• The title of the template message must be in “ remind ” perhaps “ notice ” ending
• The title cannot have special symbols
• The title cannot be marketing ： Coupons or something

Description of punishment

• First violation Delete template message Warning
• The second violation Forbidden interface 7 God
• Third violation Forbidden interface 30 God
• The fourth violation Permanent ban

matters needing attention 25 - Share

• onShareAppMessage Only the page defines this function , The sharing function in the upper right corner will be displayed
• Two ways to share

 <button open-type='share'> Share </button>

 Top right click ... share 

• onShareAppMessage Back to a object

onShareAppMessage(){
    
       return {
    
           title:"CSDN",
           desc:" This page can go directly to the animation page ",
           path:"/pages/animation/index"
       }
    },

• Pictures cannot be customized , Will get the current page , Start at the top , The height is percent 80 Screen width image as a shared picture
• You can carry parameters

matters needing attention 26 - Cancel your own title

I forgot this , So let's write here

//index.json
{
    
  "navigationStyle": "custom"
}
// Then you can set the background picture by yourself 

.container{
    
    background-image: url(https://t7.baidu.com/it/u=2581522032,2615939966&fm=193&f=GIF);
    background-size: 100% 100%;
    height: 100vh;
}

matters needing attention 27 - Get QR code API

• Only the QR code of the released applet can be obtained through the interface for obtaining the QR code
• The development version of the QR code with parameters can be generated during the preview of the developer tool
• There are only 100000 QR codes with parameters Call carefully
• post You need to make a special trip to transfer parameters json character string , I won't support it form Form submission to get

matters needing attention 28 - Common rejected scenarios of release audit are listed

Common official websites include , The following is a list of things that we don't pay much attention to

• Do not add search applet functionality to applets
• Users should not be required to reduce the security of the mobile operating system , For example, brush the machine 、 Prison break and other operations
• If there is an account system , There must be an exit operation
• Head portrait logo Transparent or colored background is required , If it is white , Need to add top border

Written in the back

The above lists some possible pitfalls and points for attention in the process of small program development , Maybe there are many things we haven't stepped on , I will update it in time , If there is anything wrong in the above content , I hope you can correct it in time , I am very grateful , In addition, the length of the article is not too long , My article is short of pictures , Because this kind of obvious article is not so miscellaneous , Small program development itself is very simple , So there is no special explanation , Just pay attention to the points that need attention , Basically, there is no problem developing a small program , Finally, I want to say that the version I am based on is wx The native version of the syntax rules ,uniapp The development of my previous blog also involves , I just haven't talked about it comprehensively , Because I think that needs vue The basis of , As long as I can vue, Will this native wx Development of , There is basically no problem , If you really need it later , I'll write an article about uniapp Some considerations encountered in development ！ I hope you will be familiar with small program development as soon as possible , Never meet BUG！

Finish off work ！ Thank you