小程序开发笔记

微信小程序

1、taBar不显示

tabBar的注册是在app.json中，list中pagePath的值要按pages中注册的路径得顺序赋值

2、for循环

循环的时候，数组遍历的不能是对象

<block wx:for="{{数组}}" ></block>

循环的时候，数组遍历的是对象

   <block wx:for="{{数组}}" wx:for-item="value" wx:key="*this">
       <text class="log-item">{{index + 1}}. {{value}}</text>
   </block>

3、navigatorTo:fail url not in app.json

这是导航页面跳转出现的错误，主要原因是没有在app.json内注册该跳转的路径。
navigator 导航导航分三种
open-type="navigate" 打开新界面
open-type="redirect" 在本界面中打开新界面
open-type="switchTab" 控制tab页之间的切换，只能打开tabBar注册的界面

4、scroll-view

使用竖向滚动时，需要给<scroll-view/>一个固定高度。
还要给<scroll-view/>填充内容才会执行loadMore,refresh。

<scroll-view  style="height:100vh;"   scroll-y="true" bindscrolltolower="loadMore" bindscrolltoupper="refresh">
</scroll-view>

5、页面传参

传递字符串

Page({  
  data: {  
    testStr: '字符串'  
  },  
  onLoad: function () {  
  },  
  next: function(e){  
    wx.navigateTo({  
      url: '/pages/test/test?str='+this.data.testStr,  
    })  
  }  
})  

接收字符串

Page({  
  data:{  
  },  
  onLoad:function(options){  
    console.log("接收到的参数是str="+options.str);  
  }  
})  

传递对象

Page({  
  data: {  
    testData:{name:'我是name', extra:'我是extra'}  
  },  
  onLoad: function () {  
  },  
  next: function(e){  
    wx.navigateTo({  
      url: '/pages/test/test?extra='+JSON.stringify(this.data.testData)  
    })  
  }  
})  

接收对象

Page({  
  data:{  
     testData:null  
  },  
 onLoad:function(options){      
     console.log("接收到的参数是obj="+options.extra); 
     this.dat.testData = JSON.parse(options.extra); 
  }
})  

传递list

Page({  
  data: {  
    list:['item-A','item-B']  
  },  
  onLoad: function () {  
  },  
  next: function(e){  
    wx.navigateTo({  
      url: '/pages/test/test?list='+JSON.stringify(this.data.list),  
    })  
  }  
})  

接收list

<span style="font-size:14px;">Page({  
  data:{  
     list:[]  
  },    
 onLoad:function(options){      
     console.log("接收到的参数是list="+options.list); 
     this.data.list = JSON.parse(options.list);
 }
}) 

6、点击事件传参

通过wxml设置data-[参数名]传递参数，[参数名]只能是小写，不能有大写

<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
    ...
</view>

接收点击参数

Page({
    clickMe: function(event) {
        var albumList = event.currentTarget.dataset.albumlist.split(",");
        wx.navigateTo({
            url: '../../pages/test/test'
        })
    }
})

7、获取form表单的值

通过bindinput获取input值

wxml页面:

<view class="section">
  <view class="section__title">你输入的是：{{inputValue}}</view>
  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>

js页面

 bindKeyInput: function(e) {
    this.setData({
      inputValue: e.detail.value
    })
  }

通过bindvubmit获取input值

wxml页面:

<form bindsubmit="formSubmit">
  <input name="detail" placeholder="详情地址" />
  <input name="realname" placeholder="收件人姓名" />
  <input name="mobile" placeholder="手机号码" type="number"/>
  <button formType="submit" type="primary">Submit</button>
</form>

js页面

formSubmit: function(e) {
  var detail = e.detail.value.detail;
  var realname = e.detail.value.realname;
  var mobile = e.detail.value.mobile;
}