微信小程序-学习总结（1）

微信小程序尺寸单位

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

设备               rpx换算成px(屏幕宽度/750)     px换算成rpx(750/屏幕宽度)

iPhone5        1rpx = 0.42px                            1px = 2.34rpx

iPhone6        1rpx = 0.5px                              1px = 2rpx

iPhone6s       1rpx = 0.552px                         1px = 1.81rpx

所以：在使用微信开发者工具开发时，使用iPhone6模拟器界面浏览效果 根据设计图尺寸*2=小程序尺寸rpx开发即可。

 

Demo1：tab选项卡

wxml:

<view class="nav">
  <view  class="nav-tab {{currentNavTab==idx ? 'active':''}}" wx:for="{{navTab}}"  wx:key="*this" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">
  {{item}}{{idx}}
  </view>
</view>

js:
Page({

data:{
    navTab:["待付款","待发货","待收货","待评论"],
    currentNavTab :
},
switchTab:function(e){
    this.setData({
      currentNavTab: e.target.dataset.idx
    })
  }

});

wxss:
.nav{display: flex;}
.nav-tab{float:left;text-align: center;color:#;font-size:28rpx;height:80rpx;line-height:80rpx;flex:;}
.nav-tab.active{border-bottom:2px solid #ef4f4f;color:#ef4f4f;}

1.wx:for控制属性绑定一个数组wx:for="{{array}}"

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名

2.target 和 currentTarget

3.bindtap不会阻止事件冒泡 catchtap会阻止事件冒泡

4.列表渲染 使用<block></block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

小程序-template模板

一 、定义模板

1、新建一个template文件夹用来管理项目中所有的模板； 
2、新建一个courseList.wxml文件来定义模板； 
3、使用name属性，作为模板的名字。然后在<template/>内定义代码片段。

注意： 
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分； 
b.模板中的数据都是展开之后的属性。

二、使用模板

 

1、使用is引用 声明需要引用的模板

<import src="../../templates/courseList.wxml"/>

2、将模板所需要的 data 传入，一般我们都会使用列表渲染。

<block wx:for="{{courseList}}"> <template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template> </block>

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件，与CSS同样的写法控制样式。 
2、在需要使用模板的页面 (父页面).wxss文件中import进来；或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";

　　

小程序-组件

picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

普通选择器：mode = selector

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

Demo:　　

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <!-- {{index}}表示选中了range对应项中的第几项 -->
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

Page({

  data: {
    array:['男','女']
  },

bindPickerChange:function(e){
  var genderIndex = e.detail.value;
this.setData({
  index: genderIndex
})
},
});

小程序-获取文本框的值的两种方式

方式一：

<!-- form表单提交 -->
<form bindsubmit="saveInfo" type="submit">
  <input type="text" name="username" value="{{username}}"/>
  <input type="password" name="pwd" value="{{pwd}}"/>
  <button formType="submit" class="edit-btn">保 存</button>
</form>

Page({

saveInfo:function(e){
    var data = e.detail.value;
    console.log(data);
    this.setData({
      username: data.username,
      pwd: data.pwd
    })
    }

})

方式二：

<view>
  <input type="text" bindinput='userName' value="{{username}}"/>
  <input type="password" bindinput='password'  value="{{pwd}}"/>
  <button bindtap="saveInfo1">保 存</button>
</view>

Page({

userName:function(e){
    this.setData({
      userName:e.detail.value
    })
  },
  password: function (e) {
    this.setData({
      pwd: e.detail.value
    })
  },
  saveInfo1:function(){
    console.log(this.data.userName+"//"+this.data.pwd);
  }

})

小程序-图片的binderror事件

 <view class="service-list" wx:for="{{productList}}" wx:for-index="idx" wx:key="productList" wx:for-item="item">
 <navigator url="../product/index?id={{item.ShopID}}" class="item">
 <view class="pic_item"><image src="{{item.ImagePath}}" class="pic" binderror="binderrorimg" data-errorimg="{{idx}}"></image></view>
 <view class="content_item">
 <view class="title_item">{{item.ProductName}}</view>
 <view class="price">
 <text>￥</text>{{item.ShopAttrList[].Price}}</view>
 <view class="item_bottom"><text>深圳市</text><text class="split-line">|</text><text>销量0 单</text></view>
 </view>
 </navigator>
 </view>

 var commonJs = require("../../Static/js/common.js");

 Page({
 data:{productList:[]}
 binderrorimg:function(e){
     var that = this;
     commonJs.binderrorimg(e,that);
   }

 })

 function binderrorimg(e,that) {
   var errorImgIndex = e.target.dataset.errorimg; //获取循环的下标
   var imgObject = "productList[" + errorImgIndex + "].ImagePath" //productLisy为数据源，对象数组
   var errorImg = {}
   errorImg[imgObject] = "http://xxx.com/Static/images/Public/img_null-120.png" //图片报错或无图片显示时 用来代替的图片
   that.setData(errorImg) //修改数据源对应的数据
 } 

 module.exports  = {
   binderrorimg: binderrorimg
 }
  

小程序-wxRequest封装及使用

common.js

 module.exports  = {
   webApi : "http://localhost:8779",
   GET: GET,
   POST: POST
 }

 var requestHandler = {
   data: {},
   url:"",
   success: function (res) {
     // success
   },
   fail: function () {
     // fail
   },
 }

 //GET请求
 function GET(requestHandler) {
   request('GET', requestHandler)
 }
 //POST请求
 function POST(requestHandler) {
   request('POST', requestHandler)
 }

 function request(method, requestHandler) {

   var host = module.exports.webApi;
   var data = requestHandler.data;
   var apiUrl = requestHandler.url;
   var userId = wx.getStorageSync('userId');
   var device = wx.getStorageSync('device');
   wx.request({
     url: host + apiUrl,
     data: data,
     method: method,
    //此处因为请求后台需要header中的两个参数 所以直接写在封装方法里
     header: {
       'AccessId': userId,
       'Req-Device': device
     },
     success: function (res) {
       requestHandler.success(res)
     },
     fail: function () {
       requestHandler.fail()
     }
   })
 }

以下app.js文件代码包含以下内容：

wx.Request封装方法的使用

授权登录接口的使用

检测当前用户登录态是否有效

获取操作系统版本信息

数据缓存

拒绝授权后提示确认授权操作

 //app.js
 var commonJs = require("Static/js/common.js");
 App({

   onLaunch: function () {

     var userId = wx.getStorageSync('userId');// 绑定成功的后台返回userId
     // 获取操作系统版本信息
     var device = '';
     wx.getSystemInfo({
       success: function (res) {
         device = res.system;
         wx.setStorageSync('device', device);
       }
     }),

 // 检测当前用户登录态是否有效
     wx.checkSession({
       success:function(){
         //session 未过期，并且在本生命周期一直有效
       },
       fail:function(){
         // 登录
           wx.login({
             success: function (res) {
               // 发送 res.code 到后台换取 openId, sessionKey, unionId
               if (res.code) {
                 wx.getUserInfo({
                   withCredentials: true,
                   success: function (res_user) {
                     //发起请求
                     commonJs.POST(
                       {
                         data: {
                           code: res.code,
                           encryptedData: res_user.encryptedData,
                           iv: res_user.iv
                           },
                         url: '/Login/LoginByCode',
                         success: function (res) {
                           console.log(res)
                           if (res.data.Success) {
                             var isBind = res.data.Data.IsBind;
                           }

                           var rdm = res.data.Data.Rdm;
                           if (isBind) {
                             console.log("登录成功");
                             if (res.data.Data.UserID) {
                               wx.setStorageSync('userId', res.data.Data.UserID);
                             }
                           }

                         },
                         fail: function () {
                           wx.navigateTo({
                             url: '../bindMobile/index?rdm=' + rdm + ''
                           })
                         },
                       })
                   },

                   fail: function () {
                     wx.showModal({
                       title: '警告通知',
                       content: '您点击了拒绝授权,将无法正常显示个人信息,点击确定重新获取授权。',
                       success: function (res) {
                         if (res.confirm) {
                           //设置界面只会出现小程序已经向用户请求过的权限。
                           wx.openSetting({
                             success: function () {
                                 wx.login({
                                   success: function (res) {
                                     if (res.code) {
                                       wx.getUserInfo({
                                         withCredentials: true,
                                         success: function (res_user) {

                                           commonJs.POST(
                                             {
                                               data: {
                                                 code: res.code,
                                                 encryptedData: res_user.encryptedData,
                                                 iv: res_user.iv
                                               },
                                               url: '/Login/LoginByCode',
                                               success: function (res) {
                                                 if (res.data.Success) {
                                                   var isBind = res.data.Data.IsBind;
                                                 }
                                                 var rdm = res.data.Data.Rdm;
                                                 if (isBind) { // 授权成功并绑定手机号/邮箱成功 才代表登录成功
                                                   console.log("登录成功");
                                                   if (res.data.Data.UserID) {
                                                     wx.setStorageSync('userId', res.data.Data.UserID);
                                                   }

                                                 } else { // 若授权成功但未绑定手机号/邮箱 则跳转到手机/邮箱绑定界面
                                                   wx.navigateTo({
                                                     url: '../bindMobile/index?rdm=' + rdm + ''
                                                   })
                                                 }
                                               }
                                             })

                                         }
                                       })
                                     }
                                   }
                                 })

                             }
                           })
                         }
                       }
                     })
                   }
                 })
               }
             }
           })
         }
     })
   }
 })
  

小程序-携带参数跳转界面并在该界面获取参数

以以上代码跳转链接为例： url : '../bindMobile/index?rdm=' + rdm + ''

在该界面的onLoad事件中获取

 Page({
      onLoad: function (options) {
         var that = this;
         that.setData({
           rdm: options.rdm
         })
   }
 }

小程序-获取点击到的元素的值

注意：以下js

 <view class="search_button_box clearfix">
   <block  wx:for="{{hotWordList}}" wx:key="hotword" wx:for-item="item">
   <view class="item" bindtap="searchHotWordTap" data-name="{{item.ShowName}}">{{item.ShowName}}</view>
   </block>
5 </view>

 searchHotWordTap:function(e){
     var that = this;
     var hotWord = e.currentTarget.dataset.name; // 此处的name与被点击元素的data-xx 的 xx对应
     that.setData({
       keyWord: hotWord
     })
   }

小程序-实现文本框数量的增减

 <view class="cart_num cf">
   <button class="cart_min pull-left" bindtap='cutNumTap'>-</button>
   <input class="cart_text_box" value="{{cartNum}}" type="text" bindchange='bindCartNum' />
   <button class="cart_add pull-right" bindtap='addNumTap'>+</button></view>

Page({

data:{
    cartNum:1
},
onLoad:function(){
},
 cutNumTap:function(){
    var that = this;
    var num = that.data.cartNum;
    if(num > 1){
      num--;
    }
    that.setData({
      cartNum: num
    })
  },
  addNumTap:function(){
    var that = this;
    var num = that.data.cartNum;
    num++;
    that.setData({
      cartNum: num
    })
  },
  bindCartNum:function(e){
    var that = this;
    var num = e.detail.value;
    that.setData({
      cartNum: num
    })
  }

})