小程序开发

官方文档：https://developers.weixin.qq.com/doc/

格式化代码：shift+alt+f

1 禁止页面拉动

在微信小程序中，用力往下拉动，页面顶部会出现一段空白的地方。在某些需求下，需要禁止拉动。

这个时候可以在page里面对应的的json文件里面，加上：

"disableScroll": true

这个属性，就会禁止页面拉动。

但是这里注意的是，在app.json里面写上这个属性并不会生效，一定要在page对应的页面的json文件加上才会生效

enablePullDownRefresh （下拉刷新） 和 disableScroll 同时为true的时候 下拉刷新不会生效

在模拟器上面测试 下拉刷新是可以的，但是在真机测试， 下拉刷新是不会生效的。

 

2 小程序多个条件判断（页面逻辑）

 <view wx:for="{{myattacheArr}}" wx:key="{{id}}" wx:for-item="AttacheItem" class='call-attache'
wx:if="{{AttacheItem.personnelType[0]==0 && RoleArr[AttacheItem.roleType].label !='渠道经理'&& appBindPhone==1}}" >

<view wx:for="{{myattacheArr}}" wx:key="{{id}}" wx:for-item="AttacheItem" class='call-attache'
wx:if="{{RoleArr[AttacheItem.roleType].label =='渠道经理'&& appBindPhone==0}}" >

<view wx:if="{{a}}">单个条件</view>
<view wx:if="{{a || b}}">多个或条件</view>
<view wx:if="{{a && b}}">多个且条件</view>

<view wx:if="{{a>5}}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else">5</view>

 

3 页面跳转四种方法：

1.  wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;

   wx.navigateTo({
       url:'../test/test?id=1&page=4',  //跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
       success:function(){}        //成功后的回调；
       fail：function(){}          //失败后的回调；
       complete：function(){}      //结束后的回调(成功，失败都会执行)
   })
   
   传递的参数在接收页面onLoad()函数中得到值：option.id就可以得到了
   onLoad: function (option) {
   　　　　console.log(option)//可以打印一下option看查看参数
       this.setData({
           id:option.id,
       });

    

2.   wx.redirectTo() , 关闭当前页面，跳转到非tabBar的某个页面，

3.  使用组件  <navigator>  示例：  

   <navigator url='../test/test'>点击跳转</navigator> 

    

4.  wx.switchTab ，跳转到tabBar的某个页面，

   wx.switchTab({
         url: '../taste/index',   //注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
       })

   注意：wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转，要跳转到tabBar页面，需要使用wx.switchTab

 

4 调用同一js的方法： 

onShow: function (options) {
var that=this;
that.queryCartList();

},
queryCartList:function(){
console.log(‘ok’)
}

 

5 三元运算

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}"

<view>{{status==1?"微信小程序":"支付宝小程序"}}</view>

style和三元表达式的结合使用 （注意单双引）

<view  style="display:  {{ 条件? 'block' :  'none' }}"/> 

 

data:{

show:true,

yes:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-3.jpg",

no:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-1.jpg"

},

<image src="{{show?yes:no}}" style="width:100%">

show为true，显示yes这个图，show为false,显示no这个图。

 

6 左上角返回按钮方法

onUnload: function () {

}

 

7 创建数组 时：如果有一定逻辑，推荐建成2 的样子。不推荐1