This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

Recently developed the micro channel small program project, but also encountered some problems, again to record down, see you have experienced similar master.

Modify an item in an object or array

Small programs often have similar requirements, such as selecting an array or other operations.

Modifies an item in an object

It is easier to modify an item in an object by simply putting brackets around a property of the object. Such as:

this.setData({
  ['params.type']: ''
})
Copy the code

This allows you to change the value of a single property in an object, rather than all of them.

Modifies the value of an item in an array

After all, we need to know the index of the changed value, which is similar to the above object. The only difference is that we need to add a variable to the key part, so the final writing method is as follows:

this.setData({ ["tableData[" + index + "].coverPic"]: ".. /.. /images/img_error.png" })Copy the code

In the example above, index is the index of the array, which is to change the coverPic value of an object in the array

To draw an image, you need to download the image first

For example, we need to draw a new picture through canvas when sharing to moments, so we need to bring a TWO-DIMENSIONAL code on the picture. After we get the two-dimensional code from the background, it is not possible to draw the picture directly on the canvas through API, but only after downloading through API.

Canvas saves the image after it is generated

Images generated by canvas we usually will be saved to the user’s mobile phone inside, let users to send to someone new, save the picture time becomes probability event, sometimes can save success and sometimes can save succeed, the problem is we need to draw method in production of callback to keep figure inside to ensure success.

Wx. request Obtains the value of the cookie

In wechat’s API for sending requests, sometimes we need to get the value of cookie to communicate with the back end. We know that Vue cannot get it, so small programs can get it. How to get it? If you look at the data returned by this API, you can see that getting a cookie is very simple, as follows:

res.header["Set-Cookie"]
Copy the code

The above res is the return value after the request interface succeeds

Use WEUI for certain components

We know that WEUI can be directly used in the extension capability of small programs, so in addition to the official use of useExtendedLib to use, in fact, we can also introduce to use. For example, we need to use the Slideview, HalfScreenDialog and ActionSheet components in WEUI. Usually, these three components are used very high. Then we can go to the WEUI Github repository and copy the components we want to use as normal components in our own projects.

You can customize tools in app.js

Usually small programs if there is a need to use their own tool functions, we are in which page needs to be in the page import, especially when the use of relative path is more troublesome, in fact, we can be in the small program app. Js inside the introduction of the mount to the APP, So the page you need to use is just getApp().utils. For example:

import utils from './utils/utils.js' App({ globalData: { userInfo: null, systemInfo: null, }, $utils:utils }); $utils.formatedate () $utils.formatedate ()Copy the code

GlobalData can also define common data or common data for other pages to use

Small program address pass value should not be too long, too long will be intercepted

Small program address followed by parameters, if the parameters are particularly many, once beyond the interception will lead to unexpected errors, in fact, here and the web page is the same, the address bar followed by parameters are limited.

Small program code package restrictions

Small program code package is restricted, the people through the official can also be detected, usually the small program all subcontract size does not exceed 20 m, single subcontract/main package size is no more than 2 m, so once you have a larger project to plan ahead, do a good job in the subcontract, it can distract package size, and so on the performance of the small program also will be better.

Applet custom event parameters

WeChat small event is not carry other parameters in the procedure, so we are usually need it to carry out corresponding operations and parameters to facilitate our, so this parameter is to carry on the structure to add custom attributes, such as data – index, etc., and then by clicking on the events of the event object to get the custom attribute’s value, examples are as follows:

<button bindtap="openLocation" data-lat="30.49984" data-lot="114.34253"> Open navigation </button> openLocation(e) { wx.openLocation({ latitude: Number(e.currentTarget.dataset.lat), longitude: Number(e.currentTarget.dataset.lot), }) }Copy the code

Style the entire page

The development of wechat small program sometimes need to set the style of the whole page, but do not want to add a label, so we can set the interface in the style, as follows:

page{
  background:#FF4400;
}
Copy the code

block

The block tag in wechat applet is the same as the template in Vue. If you use the block tag without adding a new tag, you can reach multiple parallel tags after rendering. For example, when doing a loop:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
Copy the code

wx:if vs hidden

Using WX-IF in small programs is based on local rendering. For example, wx:if the initial render condition is false, the frame does nothing; Render the component only if it is true. Using hidden initially renders the component, and its value is only responsible for showing and hiding the component. Therefore, wX :if has a higher performance cost when switching. When our project needs to switch frequently, it is recommended that wX :if be changed to hidden.

Constants or things that don’t change very much, you don’t have to put them in data, right

Too much data in a small program will also affect the performance of the small program, so not everything needs to be put in the data, in fact, we can also put in the outermost layer, such as:

const app = getApp()
let pageIndex = 1
let pageSize = 10
Page({
  data:{}
})
Copy the code

Webview urls must be whitelisted on public platforms

This restriction believe that most of you know, if there is no such restriction, it is estimated that many web versions can be directly moved to small programs, and even can quote other people’s website things, so in order to prevent this kind of thing to happen, wechat has made restrictions, must be configured in the public platform domain whitelist, Only whitelisted urls can be accessed from the WebView.

Asynchronous sharing does not take effect

Small program to share is inside the pages of a function, share in this function is used when the asynchronous effect, actually here when we click share share out soon, if you use an asynchronous request what is estimated is slow, so using asynchronous is can’t stop to share, but we can make some inside the asynchronous call, It is not clear which runs first.

Compound code decoding

Sometimes when doing small programs need to use common TWO-DIMENSIONAL code as small program diversion code, then this code is required to decode the URL when getting parameters, as follows:

decodeURIComponent(options.q)
Copy the code

Developer tools can be compiled with qr codes as well as parameters

After making alipay small program, you will find that wechat small program is much more convenient than Alipay. Alipay is not available for this function at present, and it is estimated that it will be added. The entrance is as follows:

Wx. requestPayment judgment failed and cancelled

The applet’s payment API does not return the identifier as our interface normally does. The applet’s cancellation of payment is performed on the string itself. For example, the applet returns an errMsg: “RequestPayment: Fail Cancel”, using this message fail cancel to determine whether a cancellation is made.

WXS

WXS is a scripting language for small programs, roughly the same as JS, but not as powerful as JS. We will not introduce the script itself here, but talk about how to use it alone. In fact, when we need to format some data on the page or other operational operations, we can use WXS, which is similar to the computational properties in Vue. It is easy to use just to introduce it. There are two ways to define it, one is directly in WXML, and the other is in a separate file. So if only individual pages need separate formatting or other operations you can use this scheme.

Defined directly in WXML

Here you can look directly at the official example

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
Copy the code

Separate files.WXS

If it is a separate file, then the suffix is.wxs, using the following:

<wxs src="./.. /comm.wxs" module="some_comms"></wxs> <! <view> {{some_comms.bar(some_comms.foo)}} </view>Copy the code

Template reuse

The applet also provides a template called a code snippet, which is the equivalent of writing a template if you need it in multiple places and referencing it in other places.

<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> <template is="msgItem" data="{{... item}}"/>Copy the code