Summarize experience in mini program development
微信小程序 开发经验整理
前言：
最近小程序出来了，公司也要求我们开发一款小程序。
于是，就开始着手做了，做了差不多一周吧，也遇到了很多问题，这里就来总结一下。（主要是从一个Android开发者的角度来述说的，可能比较零碎的一些知识点和经验，如果大家还有补充，欢迎）
总结
1：传参，方法判断
js中 方法中可以传递一个方法作为形参，在java中是不可以的。比如start项目中的
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},这里就是传递一个形参，cb的方法，并且这里还有一个很巧妙的判断方法
typeof cb == "function" && cb(that.globalData.userInfo)
利用的&&的运算规律，首先判断cb是不是一个方法， 这里的==可以作为类型是否相当的判断，然后在&&中如果前面的不满足，后面的则不会执行；如果是cb是一个方法，调用cb方法，并且传入success成功回调的userinfo参数
还有一点，if(this.globalData.userInfo) 可以作为是否为null的判断条件，在java中不可以。
2：log打印
log的打印，如果直接打印“”+变量 是不可以的，因为人家没有toString()方法
X console.log("info"+info);所以只能分开打印
console.log("info");
console.log(info);3: json取对象
json的使用，可以通过 json["key"]来取其子对象
person: {
name: "jafir",
age: "11",
}
var name = person["name"];
var age = person["age"];info: {persons:[{name:"123",age:11},{name:"jafir1",age:12}]}
//如果有数组 通过这种方法获取
console.log(that.data.info["persons"][1].name)
console.log(that.data.info["persons"][1].age)4：定义boolean类型值
要注意如果在page的data中要定义一个boolean类型的值，必须是 isSuccess : true而不是 isSuccess :"true"
if (this.data.isSccess) {
console.log("true")
} else {
console.log("false")
}因为如果是isSucees : "true" ,结果为true，没问题，但是如果是isSucess:"false"，结果依旧为true，
因为这里的isSuccess不是boolean，而是一个非空类型，既然非空，if就是为true
如果，默认undefined，if则为false
5：使用"that"
建议在 page{}外面定义一个that变量，然后在onLoad中赋值为this，以后所有的地方，都可以使用that,这样就避免有些地方，this并不是指向page的上下文对象
//上下文对象
var that;
page({
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
that = this;
}
...
that.setData({
xxx: xxx,
})
})6:page的生命周期方法
只有onload中有options参数，可以获取页面传值等等，onload只会执行一次
但是onShow可以每次切换页面的时候执行，所以，需要每次刷新页面的数据请求，可以放在onShow中，测试过，性能体验基本无影响
page的生命周期没有Android那么丰富，页面之间传值也有一定的限制。
可以通过普通的url的传值方式传值，xxx?key = value ，但是要注意：我们传的值其实是相当于字符串和url拼接在一起，请不要直接传一个对象,因为对象没有toString方法。
传递json对象的步骤为：
1.把json对象变成字符串，如果本身就是那就直接用，如果是json对象，需要 parseString(json)
2.和url进行参数拼接？key=value
3.取得时候在onload的options里面取出，
onLoad: function (options) {
var value= options.key
}然后JSON.stringify(value)转为json对象使用
7: 页面间跳转
从主页跳转一个新的界面 新界面处理完逻辑 成功与否 结束之后怎么通知 主页结果？
这种情况，一般是没有办法解决的。经过测试，如果你想要从二级非主页界面直接navigator打开主页，是不行的，会报错。
所以，我们采用的策略是：二级界面处理完数据之后，直接返回，然后在主页界面重新拉取数据。所以会出现，我们的请求接口是在onShow方法里面执行的。因为onload只会执行一次
8：wxml
1.text标签可以使用bindtap
<image src="pw_logoUrl?logoUrl:'../../img/paihao.png'"></image>
可以使用这种方式来显示默认的图片
3.再强调一下 在标签中使用data-xx-oo ="value",在对应对象中可以通过e.currentTarget.dataset.xxOo获得，这里的xx-oo ，-其实是会转义驼峰。这种一般使用场景为 你可以给你所点击或者绑定事件的view设置一个数据，比如你一个picker里面有5个view,就可以绑定每个view不同的值，在触发事件的时候取到相应的值
4.如果你想要显隐view你可以通过wx:if="true/false"来处理，但是这样的话，如果为false，page不会去渲染这个view,它所在的位置空间也不会预留，假如下面的view就会往上排。如果想要留存它的位置空间，可以修改其style样式来解决
style="visibility:pw_isShow?'visible':'hidden'"
9:统一网络请求处理结果
你可以封装一下网络请求的返回结果，做统一处理
requestWithGet: function(paramsData) {
data.method = 'GET'
this.requestInternal(paramsData)
},
requestWithPost: function(paramsData) {
data.method = 'POST'
this.requestInternal(paramsData)
},
requestInternal: function (paramsData) {
var that = this;
console.log('requestInternal: 开始请求接口[' + paramsData.url + ']');
//开始网络请求
wx.request({
url: paramsData.url,
data: paramsData.data,
method: paramsData.method,
success: function (res) {
console.log('requestInternal: 接口请求成功[' + paramsData.url + ']');
paramsData.success(res);
},
fail: function (res) {
console.log('requestInternal: 接口请求失败[' + paramsData.url + ']');
console.log(res);
////在这里做请求失败的统一处理
wx.showToast({
title: '网络访问失败',
duration: 1500
})
typeof paramsData.fail == "function" && paramsData.fail(res);
},
complete: function (res) {
//在这里做完成的统一处理
typeof paramsData.complete == "function" && paramsData.complete(res);
}
})
}这样在使用请求的时候，可以直接先wx.request({}) 这样，就可以IDE给你联想生成对应的请求格式，然后直接把“wx.request” 替换 “requestWithGet”或者“requestWithPost”就OK了
The above is the detailed content of Summarize experience in mini program development. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1677
14
1431
52
1334
25
1280
29
1257
24
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Can small programs use react?
Dec 29, 2022 am 11:06 AM
Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Teach you how to use public account template messages in mini programs (with detailed ideas)
Nov 04, 2022 pm 04:53 PM
This article brings you some related issues about WeChat mini programs. It mainly introduces how to use official account template messages in mini programs. Let’s take a look at them together. I hope it will be helpful to everyone.
Tutorial on writing a simple chat program in Python
May 08, 2023 pm 06:37 PM
Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only
Geographical positioning and map display using PHP and mini-programs
Jul 04, 2023 pm 04:01 PM
Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation
