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赋值
};

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 + 1this.getData()}//下拉刷新async onPullDownRefresh(){console.log('下拉刷新')this.tabData = []this.currentPage = 1this.getData()}async getData(status){}
}
</script>

小程序 wepy+MinUI相关推荐

微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序??代码示例,使用w ...
微信小程序wepy框架资源汇总
微信小程序wepy开发资源汇总 ! wepy官方仓库 wepy官方文档开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程 ...
微信小程序wepy框架快速入门
微信小程序wepy框架快速入门微信小程序简介微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一 ...
微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
微信小程序wepy框架编译生成dist目录
微信小程序wepy框架编译生成dist目录(微信小程序原生语言) 坑:如果提示sass没有安装的错误,但按提示的命令仍无法成功安装,就是node npm版本的问题,经测试发现node v10.14. ...
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿 https://github.com/t5442107/yj_wepy_gesture_lock 用vscode 打开测试! 下载 h ...
关于微信小程序wepy框架下wx-charts的使用
wx-charts在微信小程序wepy框架下的使用 wx-charts 微信小程序主流的图表工具基于 Canvas,体积小支持图表类型饼图 pie 圆环图 ring 线图 line,scroll ...
微信小程序wepy框架+minui踩坑之路
近期项目涉及微信小程序,鉴于原生小程序文件结构过于复杂,决定使用wepy框架开发 wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一下项目开发过程中 ...
小程序 wepy 用户取消授权以及取消获取地理位置后的处理方法
在wepy里使用进行小程序页面授权,里面包含了用户点击取消的重新授权方案: //auth.js /* * @Author: Porco_Mar * @Date: 2018-04-11 15:49:55 ...

小程序 wepy+MinUI

1. style 动态改变背景色

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

3.引入js文件

4…微信支付

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

6.上拉刷新，下拉加载

小程序 wepy+MinUI相关推荐

最新文章

热门文章