小程序 wepy+MinUI

1. style 动态改变背景色

 <view wx:for="{{con}}" wx:for-item="item" wx:key="{{item.index}}" tab-index="{{index}}">
    <view class="panel" style="background:{{item.activity_background_color}}">
      ***         
    </view>
 </view>

2.小程序登陆+获取用户信息

思路：
1>微信接口wepy.login()得到code

2>根据code去访问自己的服务器

代码：

globalData = {
     baseUrl: 'https:/xxxx.xxxx.xxxx/api',
      sessionId: null,
      openId: null,
      recommendId: null,
      userInfo: null,
      refuseUserInfo: false
};
onShow() {
    this.userLogin()
}
//登陆
userLogin() {
      this.globalData.loginPromise = wepy.login()
        .then((res) => {
          if (res.code) {
            console.log('登陆', res)
            const url = `${this.globalData.baseUrl}/login`;
            return http$.defaultPost(url, {
              code: res.code
            });
          }
          return wepy.showToast({ title: '用户登录失败' });
        })
        .then((res) => {
          console.log('有用户信息', res);
          if (res) {
            this.globalData.sessionId = res.session_id;
            this.globalData.openId = res.openid;
            this.globalData.recommendId = res.id;
            this.fetchUserInfo();
          } else {
            this.globalData.sessionId = '';
            wepy.showToast({ title: '获取用户失败' });
          }
        })
        .catch((err) => {
          this.globalData.sessionId = '';
          console.log('失败', err);
        });
    };
    fetchUserInfo(resLocation) {
      const url = `${this.globalData.baseUrl}/setlogin`;
      wepy.getUserInfo()
        .then(res =>
          http$.post(url, Object.assign({
            encryptedData: res.encryptedData,
            iv: res.iv
          }, resLocation)))
        .then((res) => {
          this.globalData.userInfo = res || {};
        })
        .catch(err => {
          console.log(err)
          this.globalData.refuseUserInfo = true;
          wepy.navigateTo({url: '../register/UserInfo'});
        });
    };

3.引入js文件

位置：

代码：

import pay$ from '../../api/pay.js' //请求服务器接口
  export default class UserEditor extends wepy.page {
  methods = {
    pay() {
     this.pay$.pay()/使用pay.js里面的方法pay
   }
  }
}

4…微信支付

思路：向后台传递相应的数据，得到微信需要的时间戳等等，去请求它的支付接口

代码：

 pay() {
        console.log('支付！')
        const data = {
          id: this.$parent.globalData.userInfo.id
        }
        pay$.pay(data)
          .then((res) => {
            console.log('支付结果', res)
            return wepy.requestPayment({
              timeStamp: res.timestamp,
              nonceStr: res.nonceStr,
              package: res.package,
              signType: res.signType,
              paySign: res.paySign
            });
          })
          .then(() => {
            this.showPopup()//显示提示框
          })
          .catch((err) => {
            if (err.errMsg === 'requestPayment:fail cancel') {
              wepy.showToast({
                title: '支付失败',
                icon: 'cancel',
                duration: 2000
              })
            }
          });
      },

5.返回上一页后，刷新数据

功能描述：A页面中点击某条数据到B页面的详情页，B页面标记数据已读，当点击B页面返回上一页后，刷新A页面
分页代码：
A：

 //页面的生命周期函数
 onLoad() {
      this.tabData = []//存储数据的数组，因为要有下拉刷新和上拉加载，这里需要将数据置空
      this.getData(0)//获取数据，并给this.tabData赋值
};

B:

onLoad(options) {
      this.id = options.id//路由中，获取数据的id,去加载数据详情
      var pages = getCurrentPages(); // 获取当前页面的页桢  打印出来是 [V, V]
      if (pages.length > 1) {
        //上一个页面实例对象
        var prePage = pages[pages.length - 2];
        //关键在这里,这里面是触发上个界面
         prePage.onLoad()
        // 具体的要根据自己的来查看所要传的参数，或者不传形参，直接调用
      }
    };

6.上拉刷新，下拉加载

<template>
<scroll-view scroll-y="{{true}}" @scrolltoupper="onPullDownRefresh" @scrolltolower="onReachBottom" wx:if="{{tabData.length > 0}}"
        class="tab-con">
          <view class="tab-item" wx:for="{{tabData}}" wx:for-item="item" wx:key="{{item.index}}"
          bindtap="toDetail({{item.uuid}})">
            <view class="tab-item__left">
              <image src="{{item.triggerImageURL}}"/>
            </view>
            <view class="tab-item__right">
              <view class="tab-item__right-title">
                <view class="tab-item__right-title-box"></view>{{item.policyName}}
              </view>
              <view class="tab-item__right-con">
                <view class="tab-item__right-con-item">
                  <view>
                    <image src="../../img/renyuan_normal@3x.png" style="width:30rpx; height:34rpx;"/>
                  </view>
                  <view>
                    <span wx:if="{{item.alarm_type === '0'}}">黑名单</span>
                    <span wx:if="{{item.alarm_type === '1'}}">白名单</span>
                    <span wx:if="{{item.alarm_type === '2'}}">大门检测</span>
                    <span wx:if="{{item.alarm_type === '3'}}">红区</span>
                  </view>
                  <!--BLACK("0","黑名单"), WHITE("1","白名单"), DOOR("2","大门检测"), RED_AREA("3","红区"),-->
                </view>
                <view class="tab-item__right-con-item">
                  <view><image src="../../img/didian_normal@3x.png" style=" width:30rpx; height:34rpx;"/></view>
                  <view>{{item.device_name}}</view>
                </view>
                <view class="tab-item__right-con-item">
                  <view><image src="../../img/shijian_normal@3x.png"style="width:30rpx;height:30rpx;"/></view>
                  <view>{{item.triggerTime}}</view>
                </view>
              </view>
            </view>
            <view style="position: absolute;top: 40%;right:3%;">
              <image src="../../img/cengji_normal@2x.png" style="width: 12rpx;height:22rpx"/>
            </view>
          </view>
          <!--<view class="weui-loadmore" hidden="{{isHideLoadMore}}">-->
            <!--<view class="weui-loading"></view>-->
            <!--<view class="weui-loadmore__tips">正在加载</view>-->
          <!--</view>-->
        </scroll-view>
        <view wx:else>
          <wxc-abnor image="../../img/tishi_normal@3x.png" title="暂无消息"></wxc-abnor>
          <!--<wxc-abnor image="http://39.105.115.35/xcx/bg@2x.png" title="暂无消息"></wxc-abnor>-->
        </view>
</template>
<script>
import wepy from 'wepy';
export default class Home extends wepy.page {
data = {
      tabData:[],
      //分页
      currentPage: 1,
      pageSize: 10
    };
//加载更多
    async onReachBottom() {
      console.log('加载更多')
      this.currentPage = this.currentPage + 1
      this.getData()
    }
    //下拉刷新
    async onPullDownRefresh()
    {
      console.log('下拉刷新')
      this.tabData = []
      this.currentPage = 1
      this.getData()
    }
    async getData(status){}
}
</script>