实用小程序技巧

这里主要是来自于追逐时光大佬的文章我觉得很好所以转发一下,文章地址:https://www.cnblogs.com/Can-daydayup/p/10687315.html知识点:一、向后端请求数据方法:wx.request({})wx.request({url:'https://xxx.com/api/GetData',//这里填写你的接口路径,注意一定要在微信小程序中授权过得https数字加密...

实用小程序技巧

这里主要是来自于追逐时光大佬的文章我觉得很好所以转发一下,

文章地址:https://www.cnblogs.com/Can-daydayup/p/10687315.html

知识点:

一、向后端请求数据方法:

wx.request({})

复制代码
wx.request({url: 'https://xxx.com/api/GetData', //这里填写你的接口路径,注意一定要在微信小程序中授权过得https数字加密域名method: 'get',//请求方式header: { //接口口返回的数据是什么类型,这里就体现了微信小程序的强大,直接给你解析数据,再也不用去寻找各种方法去解析json,xml等数据了'Content-Type': 'application/json'},data: {//请求数据name: ''},success: function (res) { if (res.statusCode == 200) {//statusCode==200表示请求成功,有数据返回 //这里就是请求成功后,进行一些函数操作 console.log(res.data)//// 服务器回包内容console.warn(res)}},fail: function (res) {wx.showToast({ title: '系统错误' })},complete: () => {wx.hideLoading();} //complete接口执行后的回调函数,无论成功失败都会调用});
复制代码

二、通过凭证进而换取用户登录态信息:

wx.login({})

复制代码
wx.login({success(res) {if (res.code) {// 发起网络请求wx.request({url: 'https://test.com/onLogin',data: { code: res.code},method: 'post',header:{'Content-Type':'application/json'},success:function(res){ //得到用户openidconsole.log(res.openid);}})} else {console.log('登录失败!'res.errMsg)}}})
复制代码

三、小程序中三种变量声明方式(var,let,const):

1
2
3
var:全局变量
let: 块级变量,又称之为局部变量
const:块级作用域,当时它属于不变的常量

  

四、小程序应用生命周期:【详细概括:https://www.jianshu.com/p/0078507e14d3】

1
2
3
4
小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。
当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。
<br>data Object 页面的初始数据<br>onLoad Function 生命周期函数--监听页面加载,首次进入会执行此方法进行数据加载,一个页面只会加载一次<br>onReady Function 生命周期函数--监听页面初次渲染完成<br>onShow Function 生命周期函数--监听页面显示,数据显示,每次打开页面都会加载一次<br>onHide Function 生命周期函数--监听页面隐藏<br>onUnload Function 生命周期函数--监听页面卸载

  

五、模块引入方式(require或者是import):

// 用 import 或者 require 引入模块 1.import util from '../../../util/util.js'2.var Promise = require('../../../plugin/promise.js')

六、对应方法中通过定义var that=this;来代表当前方法的上下文对象:

为什么要这样做呢?

  在javascript语言中,this代表着当前的对象,而this在微信小程序中随着执行的上下文随时会变化。所以当在一个方法里面直接使用this的话会找不到这个方法中所指定的对象值,因为对应的上下文中的data值已经改变了。自然就没有了data属性,也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。

var that=this;//把this对象复制到临时变量that.console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性

七、小程序缓存的那些事:

1.wx.setStorageSync(string key, any data)

2.wx.setStorage(Object object)

复制代码
//本地缓存wx.setStorage({key: "cartResult",data: cartResult})//小程序本地缓存wx.setStorageSync(string key, any data)//通过key获取缓存中的对象值: wx.getStorage({key: 'cartResult',success: res => {  if (res.data.length > 0){ this.setData({cartResult: true });}}, })//清空对应缓存:wx.removeStorageSync('cartResult')//清空小程序缓存wx.clearStorageSync()
复制代码

八、微信小程序列表渲染:

wx:for 控制属性绑定一个数组,
wx:for-item :当前数组变量名wx:for-index 当前数组下标的一个变量名wx:key:如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/>
中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
复制代码
//微信wxml列表循环:<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">{{index 1}}、{{item.title}}</view>//js中page({data:{items:[{title:'小明'},{title:'小红'}]}})
复制代码

九、小程序js中的数组 forEach 数据遍历:

复制代码
data:{objIndex:[{name:'小明'},{name:'小红'},{name:'小姚'}]}//定义容器let ContentArray=[];//索引数据拼接objIndex.forEach(function(item, index) {ContentArray.push({name:item})});
复制代码

十、小程序js中的数组 for 数据遍历:

复制代码
let dList=res.data.list;let array=[];for(var i in dList){//数组拼接array.push({id:dList[i].Id,menu_logo: dList[i].CoverImgId,menu_name: dList[i].CategoryName,price: dList[i].SalesPrice});}
复制代码

十一、微信小程序模块化(向外暴露接口):

复制代码
第一种方式:fucntion sayGoodbye(){//相应逻辑}//向外暴露1.module.exports{ sayGoodbye:sayGoodbye }2.exports.sayHello=sayHello;第二种方式://直接全部模块化export default={function sayHello(name) {  console.log(`Hello ${name} !`)}function sayGoodbye(name) {  console.log(`Goodbye ${name} !`)}  };
复制代码

十二、小程序事件方法【bindtab,catchtap,bindconfirm,bindfocus,

源文地址:http://www.guoxiongfei.cn/cntech/17076.html
0