微信小程序前端常见效果

因为最近一直在开发小程序，以前也没怎么学过小程序。边学边做，get到的常用页面效果。记录一下，以便自己以后可能忘了，但又用的上。

固定盒子在最下层

	bottom: 0rpx;
    position: fixed;

选项卡

xxx.wxml

<view class="content">
        <swiper current="{{currentData}}" class='swiper' style="height:732rpx;width:100%" duration="300" bindchange="bindchange">
            <swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item> 
            <swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
        </swiper>
        <view class='topTabSwiper'>
            <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'> 
                 相关动态
            </view>
            <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>已关注</view>
        </view>
    </view>

xxx.wcss

.tab{
    float: left;
     width: 50%;
     text-align: center;
     padding: 10rpx 0; 
     background: #ffffff
    }
.topTabSwiper{
    border-top: 1px solid #ccc;
    width: 100%;
    bottom: 0rpx;
    position: fixed;
    /* zoom: 1; */
    }
.topTabSwiper:after{
    content: ""; 
    clear: both;
    display: block;
}
.tabBorer{
    /* border-bottom: 1px solid #f00; */
    color: #4292dd;
    }
.swiper{
    width: 100%;
}
.swiper_con{
    text-align: center; 
    width: 100%; 
    height: 100%; 
    padding: 80rpx 0;
}

xxx.js

data:{
currentTab:0
}

//获取当前滑块的index
  bindchange:function(e){
    const that  = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent:function(e){
    const that = this;

    if (that.data.currentData === e.target.dataset.current){
        return false;
    }else{

      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },

获取view里面的内容

xxx.wxml

<view data-index = "随便填写你需要的名字"> 内容<view>

xxx.js

onLoad: function(e){
	console.log( e.currentTarget.dataset.index);
}

获取view的下标也是同样的方式

微信充值及充值回调

wx.request({
　　url: "后端的充值接口",
   method: "POST",
   dataType: "json",
   header: {
     'content-type': 'application/x-www-form-urlencoded'
   },
   data: {
     amount: amount,  // 充值金额
     token: token,
     openId: openId
   },
   success: function (res) {
     if (res.data.code == '1') {
       that.setData({
         payParams: res.data.data  // 后端从微信得到的统一下单的参数
       })
       that.xcxPay();  // 拿到统一下单的参数后唤起微信支付页面
     } 
   }
})

wx.requestPayment({
　  'timeStamp': that.data.payParams.timestamp.toString(),  // 时间戳必须是字符串，否则会报错
   'nonceStr': that.data.payParams.str,
   'package': 'prepay_id=' + that.data.payParams.prepay_id,  // 这里的值必须是 prepay_id=XXXXXXXXX 的格式，否则也会报错
   'signType': 'MD5',
   'paySign': that.data.payParams.sign,
   'success': function (res) { 
　　　　// 这里应该是 res.errMsg , 跟公众号的支付返回的参数不一样，公众号是 err_msg, 就因为没注意到这个，折腾了很长时间
   　　if(res.errMsg == "requestPayment:ok"){  // 调用支付成功
      　　wx.redirectTo({
              url: '../chargelist/chargelist'   // 充值成功后的处理，可以跳转，也可以根据自己的需要做其他处理
         })
      }else if(res.errMsg == 'requestPayment:cancel'){
　　　　　　// 用户取消支付的操作
　　　 }
   },
   'fail': function (res) {
   　　return false;
   },
   'complete': function (res) { }
})

微信支付前端界面

 1 var app = getApp();
 2 Page({
 3   data: {},
 4   onLoad: function (options) {
 5     // 页面初始化 options为页面跳转所带来的参数
 6     var that = this
 7     //登陆获取code
 8     wx.login({
 9       success: function (res) {
10         console.log(res.code)
11         //获取openid
12         that.getOpenId(res.code)
13       }
14     });
15   },
16   getOpenId: function (code) {
17     var that = this;
18     wx.request({
19       url: "https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code=" + code + "&grant_type=authorization_code",
20       data: {},
21       method: 'GET',
22       success: function (res) {
23         that.generateOrder(res.data.openid)
24       },
25       fail: function () {
26         // fail
27       },
28       complete: function () {
29         // complete
30       }
31     })
32   },
33   /**生成商户订单 */
34   generateOrder: function (openid) {
35     var that = this
36     //统一支付
37     wx.request({
38       url: '后台路径',
39       method: 'GET',
40       data: {
41         gfee: '商品价钱',
42         gname: '商品名称',
43         openId:openid
44         （商品价钱和商品名称根据自身需要是否传值,openid为必传）
45       },
46       success: function (res) {
47         var pay = res.data
48         //发起支付
49         var timeStamp = pay[0].timeStamp;
50         var packages = pay[0].package;
51         var paySign = pay[0].paySign;
52         var nonceStr = pay[0].nonceStr;
53         var param = { "timeStamp": timeStamp, "package": packages, "paySign": paySign, "signType": "MD5", "nonceStr": nonceStr };
54         that.pay(param)
55       },
56     })
57   },
58  
59   /* 支付  */
60   pay: function (param) {
61     console.log("支付")
62     console.log(param)
63     wx.requestPayment({
64       timeStamp: param.timeStamp,
65       nonceStr: param.nonceStr,
66       package: param.package,
67       signType: param.signType,
68       paySign: param.paySign,
69       success: function (res) {
70         // success
71         wx.navigateBack({
72           delta: 1, // 回退前 delta(默认为1) 页面
73           success: function (res) {
74             wx.showToast({
75               title: '支付成功',
76               icon: 'success',
77               duration: 2000
78             })
79           },
80           fail: function () {
81             // fail
82  
83           },
84           complete: function () {
85             // complete
86           }
87         })
88       },
89       fail: function (res) {
90         // fail
91       },
92       complete: function () {
93         // complete
94       }
95     })
96   }
97 })

文本域（字数的统计）

<view class="conts">
    <textarea class="areas" placeholder='空空如也，快点评论吧' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 
        <text class="currentWordNumber">{{currentWordNumber}}/{{max}}</text>
        <text class="hint">{{texts}}{{num}}{{textss}}</text>
    </textarea>
</view>

.conts{
  width: 750rpx;
  height: auto;
  border: 1rpx soldi red;
  margin-top: 30rpx;
}
.areas{
  height:152rpx;
  font-size: 30rpx;
  text-indent: 28rpx;
  border: 1rpx solid gainsboro;
  padding-top: 30rpx;
  margin: 0 auto;
  overflow: hidden;   
  position: relative; 
}
.currentWordNumber{
  font-size: 28rpx;
  color: gray;
  position: absolute;
  left: 480rpx;
  top: -6rpx;
}
.hint{
   font-size: 28rpx;
   position: absolute;
   top: 130rpx;
   left: 320rpx;
   color: #FF6600;
}

Page({
  data: {
    texts: "至少需要15个字",
    min: 15,//最少字数
    max: 520, //最多字数 (根据自己需求改变) 
    currentWordNumber:0
  },

  //字数限制  
  inputs: function (e) {
    // 获取输入框的内容
    var value = e.detail.value;
    // 获取输入框内容的长度
    var len = parseInt(value.length);
    console.log(len)
    //最少字数限制
    if (len <= this.data.min)
      this.setData({
        texts: "至少还需要",
        textss: "字",
        num:this.data.min-len
      })
    else if (len > this.data.min)
      this.setData({
        texts: " ",
        textss: " ",
        num:''
      })

    this.setData({
      currentWordNumber: len //当前字数  
    });
    //最多字数限制
    if (len > this.data.max) return;
    // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行

    console.log(this.data)
  }
})

text文本自动换行

<text style="word-break:break-all;"></text>

页面之前传值

传值页面

 <navigator url="../../membership/airport-reservation/reservation-desc/reservation-desc?id={{item.id}}">
 </navigator>

取值页面

data: {
 id:'', 
}
onLoad: function (options) {
    this.setData({
      id:options.id
    })
    }