1：js文件中，每个函数写完末尾必须有“，”号，不然会报错，最后一个函数不用“，”
2：修改了js文件的话，需要清除缓存，多刷新几次，不然效果不会出来。
3：tabBar主页面跳转可以使用navigator，普通页面跳转到tabBar页面需要用 wx.switchTab
4：wxss样式文件里面图片的路径background-image：可以使用网络图片，或者 base64，或者使用<image/>标签
5：同步缓存和异步缓存的区别：
同步稳定 , 代码易读 , 调试方便 , 出错少 , 耗时长
异步易错 , 代码复杂 , 耗时短
6：报错js文件未load，除非是路径错误，一般是js文件里面的方法出现错误
7：报错setData错误，一般是this作用域问题，需要在success函数外面var that=this
8：tabbar页面不刷新问题：
wx.switchTab：跳转到tabbar页面，并关闭其他非tabbar页面
wx.reLaunch：关闭所有页面，打开到应用内的某个页面
ps：用wx.reLaunch可以关闭tabbar页面，那么下次打开的时候即必须重新加载页面
wx.navigateTo：保留当前页面，跳转到某一页面（跳转过去的页面左上角有一个返回按钮）
wx.redirectTo：关闭当前页面，跳转到某一页面（跳转过去的页面右上角没有返回按钮)
9：let 、var和const的区别：
let：声明局部变量
var：声明全局变量
const：声明常量（const PI=3.14），也具有块级作用域
10：组装数组
var globalGoodsList = app.globalData.selectGoods;
var productsList = [];
for (var i in globalGoodsList){
if (globalGoodsList[i].waitForPay==true){
productsList.push({ product_id: globalGoodsList[i].product_id, name: globalGoodsList[i].goodName, count: globalGoodsList[i].count, price: globalGoodsList[i].price, wholesale_price: globalGoodsList[i].wholesale_price});
}
}
console.log(productsList);
11：小程序生成二维码
https://blog.csdn.net/xbw12138/article/details/75213274
12：小程序右上角添加转发功能，在js文件添加onShareAppMessage函数即可。
//右上角分享功能
onShareAppMessage: function (res) {
var that = this;
return {
title: '',
path: '/pages/list/list?id=' + that.data.scratchId,
success: function (res) {
// 转发成功
that.shareClick();
},
fail: function (res) {
// 转发失败
}
}
},
13：小程序微信登录：
参考网站：
https://blog.csdn.net/weidong_y/article/details/79636386#commentsedit
https://www.jianshu.com/p/6be259f355ee
https://blog.csdn.net/wang_kill/article/details/80294673
https://blog.csdn.net/qq_33616529/article/details/79080141
官方文档：
https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=384460955&docid=000aee01f98fc0cbd4b6ce43b56c01
14：小程序wx.request用post方式传递数据，需要加一句 header: {'content-type': 'application/x-www-form-urlencoded'} 才不会报错。
15：小程序设置同一个js文件内所有函数都能使用的变量方法：
在data { con：null } 声明一个变量——》在第一个函数里面给变量赋值：that.setData ({ con: '123'}) ——》在需要使用con的其他函数调用 that.data.con
注意：不能直接用this赋值或调用，需要var this给其他变量，如var that=this；
16：小程序onload、onshow、onready执行顺序： 先onload，然后到 onshow，最后 onready
17：条件渲染写法：
<view wx:if="{{message && isLoading==false}}">
<text>更新数据</text>
</view>
<view wx:elif="{{!message && isLoading==false}}">
<text>暂无数据</text>
</view>
<view wx:else>
<text>网络错误</text>
</view>
18：安卓手机无法渲染数据，苹果手机和开发者工具都可以正常显示：
1：是否使用官方富文本解析器wxParse文件，如果有使用，html2json.js中的其中一行代码console.dir（value）注释掉即刻。安卓手机不支持使用这个函数。
2：苹果手机返回的数据类型是object，而安卓手机返回的是string，加入一下代码转化数据类型即可：
var json1 = res.data
if (typeof json1 != 'object') {
if (json1 != null) {
json1 = json1.replace("\ufeff", "")
var ob1 = JSON.parse(json1)
console.log(ob1);
res.data = ob1;
}
}
19：小程序图片自适应高度：image属性：mode
https://www.jianshu.com/p/ae335d50b67d
https://www.cnblogs.com/luleixia/p/6935301.html
注：image组件默认宽度300px、高度225px
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
裁剪 top 不缩放图片，只显示图片的顶部区域
裁剪 bottom 不缩放图片，只显示图片的底部区域
裁剪 center 不缩放图片，只显示图片的中间区域
裁剪 left 不缩放图片，只显示图片的左边区域
裁剪 right 不缩放图片，只显示图片的右边区域
裁剪 top left 不缩放图片，只显示图片的左上边区域
裁剪 top right 不缩放图片，只显示图片的右上边区域
裁剪 bottom left 不缩放图片，只显示图片的左下边区域
裁剪 bottom right 不缩放图片，只显示图片的右下边区域
20：上拉加载和下拉刷新：
js页面：
var p = 1
var url = app.globalData.wx_url_1 + 'product/getAllProducts&page=1';
var GetList = function (that) {
that.setData({
hasRefesh: true
});
wx.request({
url: url,
data: {
page: p
},
success: function (res) {
setTimeout(() => {
that.setData({
isLoading: false
});
var l = that.data.list
for (var i = 0; i < res.data.length; i++) {
l.push(res.data[i])
}
that.setData({
list: l,
hasRefesh: false
});
}, 300);
p++;
}
});
}
Page({
data: {
list:[]
},
onLoad(options) {
var that = this;
GetList(that);
// 初始化scroll-view高度
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
}
});
},
onPullDownRefresh: function () {
//下拉
console.log("下拉");
p = 1;
this.setData({
list: [],
});
var that = this
GetList(that)
},
onReachBottom: function () {
//上拉
console.log("上拉")
var that = this
GetList(that)
}
})
json页面：
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
}
21：设置navigator属性 hover-class="none"时，没有点击态效果
22：如何新建自定义组件：https://www.jianshu.com/p/8a2a730d9e60
23：小程序特殊字符转义：<text decode="{{true}}">{{item.name}}</text>
24：小程序预点击图片自动查看大图：
wxml：<image src="{{item.image}}" data-index='{{index}}' bindtap='previewImg'/>
js：//点击图片自动放大图片
previewImg: function (e) {
var index = e.currentTarget.dataset.index;
var imgArrs = new Array(); //imgArrs必须是一维数组格式
var objkeys = Object.keys(this.data.imagesGallery); //this.data.imagesGallery是二维数组对象
for (var i = 0; i < objkeys.length; i++) {
imgArrs.push(this.data.imagesGallery[i].image);
}
wx.previewImage({
current: imgArrs[index], //当前图片地址
urls: imgArrs //所有要预览的图片的地址集合 数组形式
})
},
网友评论