关于小程序

笔记向文章。欢迎和各位一起讨论。如果文章中有错误请指出。

1.一些需要去取data中的变量的操作。我们可以运用ES6对象解构赋值来做简化。这样的方法我们不光可以在小程序中使用同样也可以用到vue里面。

// 例子(小程序) let a = this.data.a; let b = this.data.b; // ES6对象解构赋值 let {a,b} = this ; // vue let {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.js export 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)         },       })     }) } // 其他页面js import {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.js const 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) } // 其他页面js import {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"来解决问题。

推荐教程：《微信小程序》

以上就是关于小程序的详细内容，更多内容请关注技术你好其它相关文章！