Catalogue of WeChat Mini Program Development Tutorials
Main article
1 Current pits
2 How to use WebSocket reasonably
3 Dynamically modify the color of svg according to the theme color
Fanwai
WeChat applet development road-map call, you have to pay attention to several pits
"one person, one "Cheng" series-[About Ball online] Mini Program Technology Selection and Architecture Design
Written at the beginning of the
summer of 20190729, it is also the beginning of the WeChat applet development journey.
The so-called pit
1. You'd better not change main.js.
When we create a new uniapp project in HBuilder X, the default main.js looks like this:
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount(
)
If you delete …App, or change it to …app, although the compiled WeChat applet will not report an error, the onlaunch and onshow events in App.vue will not be executed. I don't know the specific reason yet, so don't change this sentence anyway.
2. Creating cloud functions
in uniapp At present, it is very convenient to create cloud functions in the WeChat applet development platform, but it seems unfriendly to create cloud functions in uniapp. If you create a cloud function in the compiled WeChat applet development platform, when the development platform is closed, uniapp recompiles and opens, the cloud function will not exist.
In order to edit and debug cloud functions locally, here is a set of reasonable logic, as follows
Step 1: In the uniapp project, in the source code view of manifest.json, enter the following code
"mp-weixin": { "cloudfunctionRoot": "static/cloudfunctions/", ... } Function: Specify the local folder of the cloud function. Step 2: Create a new cloudfunctions folder under the static folder Step 3: Create a new README.md file under the cloudfunctions folder, or any other file. Function: Ensure that the cloudfunctions folder exists after compiling into a small program. If there are no files in the folder, the folder will not be displayed in the WeChat applet development platform by default. Step 4: In the developer platform, right-click the cloudfunctions folder and click "Sync Cloud Function List", as shown in Figure 1. At this time, a new function list folder will be created under this folder, as shown in Figure 2. Figure 1 Figure 2 Step 5: Right-click the cloud function folder that needs to be edited, click "Download Cloud Function", the two files index.js and package.json will be downloaded under the folder, and we can edit the cloud in index.js function. Step 6: After editing, remember to right-click the cloud function folder, click "Upload and Deploy: Cloud Installation Dependency", upload the cloud function to the cloud, and ensure that the cloud function downloaded next time is up to date. It should be noted that cloud functions are not actually downloaded to the static/cloudfunctions folder, but to unpackage/dist/dev/mp-weixin/static/cloudfunctions, so you can’t find this in the folder. Several cloud function files are only displayed in the developer platform.
3. Cloud function installs other npm dependency packages.
Right-click the cloud function folder, click "Open in Terminal", and install the required dependency packages with the command line.
Right-click the cloud function folder and click "Upload and Deploy: All Files"
4. Mini Program What are the similarities and differences between the client API and the server API
. The API of the applet is executed in the js of the applet. It can only operate on the user's own data, and has no authority to operate on other users' data.
The server API is executed in a cloud function and has the highest authority.
The main difference lies in the level of authority. In addition, the applet can read up to 20 database records, and the server-side API can read 100, and the ability to call server resources is also different.
Therefore, it is recommended that only operations involving oneself (such as inserting a new record and updating one's own record) can be used with the applet-side API, while operations involving traversing the database and querying, etc., use the server-side API.
5. Remove the button default style
WeChat applet provides developers with two ways to share (forward) the applet, one is to share in the button in the upper right corner, the other is to add open-type= to the button in the page "share" to forward. Under normal circumstances, we will give a sharing button on the settings page of the applet, but we don't want the style of the button, but want to use some styles of the view, so how to remove the default style of the button?
If we directly add inline style style="border:none;" to the button, we will find that it is useless. . .
Correct writing:
<button class="share" style="background-color:white;border-radius:0;"></button>
<style>
.share::after{ border:none; } </style> In this way, we will It is found that the border of the button is gone, and the background is changed to white. Then we can use this button as other views.
6. The use of v-if in components cannot be used ===
A bug was discovered today, that is, when v-if is used in uni-app, it cannot be used === to judge equality, only ===.
7. Use of websocket
One of the very special functions of my small program is that it needs to send and receive messages in real time, similar to real-time chat tools such as QQ and WeChat, but the functions are not so complete. This involves the realization of websocket. The applet has its own websocket function api, which can connect, close and monitor various events of long connections. This part does not talk about the back-end implementation. My back-end is implemented by using node.js to reference the ws package. Of course, you need to convert ws to wss. This is also very simple. You only need to have an ssl certificate, which is in the ws package. method. The method of converting ws to wss is as follows:
For details, please refer to the github ws
WeChat applet. The recommended way to create websocket is
var socketTask = uni.connectSocket({ url:'wss://www.example.com/socket', //Only an example, not a real interface address. complete: ()=> {} }); The socketTask object has its own Event, a small program word can create 10 socketTask objects, that is, 10 long connections. Here I mainly want to discuss how for a multi-page applet, how to make each page respond to the information returned by the websocket, how to keep a applet with only one long connection, and where to write monitoring events? Here is a brief idea, because there may be many people who want to understand this part (self-feeling, because it has troubled me for a while), and I will write a special article in the future, you can pay attention to it. The following is the idea:
Create a global socketTask object in onlaunch in App.vue of the applet, (a global variable mounted on vue.property), and then directly use the readyState of the socketTask object in each page to determine the connection status to
create a global Function, used to create and monitor socket, and directly reference it where needed, also mount it on vue.property,
use vuex, listen to the message in the function, for different types of messages, update the state of vuex, in the required sub Monitor the state of vuex in the page.
Note the different pages of the watch will not be destroyed, so in order to avoid duplication of monitoring, and finally this. $ Watch () event page hide when unwatch () to cancel the listener
summarizes the
pit actually find many encounters, some left out temporarily Write it down here.
I know that articles with this structure are very unpopular, because most people will not retrieve them, so the important parts will be split into separate articles later. The uniapp compilation applet is still being improved, and some bugs were encountered in the process, but it seems that they have been resolved after reporting to the staff, so I won't go into details here. Mini Programs are a low-cost platform with a lot of room for development. I hope that more and more Mini Program developers will become bigger and stronger.