// 例子(小程序)let a = this.data.a;let b = this.data.b;// es6对象解构赋值let {a,b} = this ; // vuelet {a,b} = this.data; //小程序
2.小程序的 组件公共属性 hidden如果不注意看文档的朋友可能就会遗漏这个公共属性。等于css 中的display:none; 可以运用于频繁切换的节点。
<view hidden="{{false}}"></view> <!-- false 为显示 true为隐藏 -->
引用官方的话来说：”一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。“
3.关于text博主刚开始写小程序的时候在wxml中使用格式化文档时踩过的坑
<!-- 这样的写法会出现换行的效果 --><text> sevendream sevendream </text><!-- 如果不需要换行的效果--><text>sevendream sevendream</text>
4.关于image 有事需要渲染图片时，连续的图片会发现图中间有条白缝。如果做商城方面在商品详情中它是切片的话中间有白条很不雅观。在image标签加入display:bolck就好了。<image src="xxx.png" style="display:block"></image>
5.关于跳转如果超出最大页面栈处理方法(大于10页) ,将跳转封装。
//utils.jsexport function navigateto(url) { let type = getcurrentpages().length >= 10 ? 'redirectto' : 'navigateto' return new promise((resolve, reject) => { wx[type]({ url, success: res => { resolve() }, fail: err => { reject(err) }, }) })}// 其他页面jsimport {navigateto} from '../../utils/utils';navigateto('pages/index/index')
返回上一页时刷新（例如返回个人中心）
wx.switchtab({ url: '/pages/my/my', success:function(){ var page = getcurrentpages().pop(); //当前页面 page.onload(); // 调用 onload }})
在返回上一页时设置上一页的的值
var pages = getcurrentpages(); // 获取页面栈 var prevpage = pages[pages.length - 2]; //上一页 prevpage.setdata(data); wx.navigateback({ delta: 1 })
6.this.setdata 如果想改变对象或数组中的一个
//data data: { obj: { a: 1 }, array: ['1'] }, //改变对象 setobj:function(){ var name = 'a' var obj = 'obj.a' this.setdata({ [obj]:2 }) }, //改变数组 setarr: function () { var num = 0 var arr = `array[${num}]` this.setdata({ [arr]: 2 }) }
如果我们有个表单需要绑定很多bindinput，运用上面的方案,在加上data-*。不需要写很多方法了一个就够了
<input data-name="name" bindinput="oninput" value="{{fromobj.name}}"> <input data-name="phone" bindinput="oninput" value="{{fromobj.phone}}"> <input data-name="address" bindinput="oninput" value="{{fromobj.address}}">
// 写入 data:{ fromobj:{ name:'', phone:'', address:'' } }, oninput: function (e) { let name = e.currenttarget.dataset.name let value = e.detail.value let valueobj = `fromobj.${name}`; this.setdata({ [valueobj]:value }) }
7.封装 wx.request (网上有很多关于wx.requset的封装方案，这里展示楼主的封装方案)
//api.jsconst http_url = 'https://xxxx.xxx.xxx/'function request(url, data={},method='get',contenttype='application/json;charset=utf-8') { return new promise((resolve, reject) => { wx.request({ url: http_url.http + url, method: method, header: { 'content-type': contenttype, 'xxxx': 'xxxx' // 其他header头 }, data: data, success: function (res) { resolve(res.data) }, fail: function (err) { reject(err) } }) })}export function getapi(data) { var url = '/getapi'; return request(url, data)}// 其他页面jsimport {getapi} from '../../utils/api';getapi({a:1,b:2}).then(res=>console.log(res)).catch(err=>console.log(err))
8.其他注意的问题
如果运用到了iconfont，是一次性将文件全部放入的话0一定要把iconfont.js删除。真机的时候会出现报错。白屏无法加载的情况。
制作动画效果时注意 建议用官方的animation api 或者css3的animation 慎用transition
最后说一个楼主遇到的坑（可能是我的处理方式不对）。在map 组件上的层级不要使用高度变化或者宽度变换的动画过度效果，微信animation api和css3 transition animation 属性都会卡桢，卡成ppt。尽量使用他们（微信api，css3）的transform来解决问题。
推荐教程：《微信小程序》
以上就是关于小程序的详细内容。