一、小程序wepy初始化
1、全局安装wepy-cli脚手架
npm install wepy-cli -g
2、查看wepy版本号
$ wepy -v
3、安装项目
//1.7.0之前版本
$ wepy new myproject
//1.7.0之后版本
$ wepy init standard myproject
4、进入项目 安装依赖
$ cd myproject
$ npm install
5、开启实时编译
//npm run dev
wepy build --watch
注意：
将dilt文件导入微信开发工具查看页面效果
关闭ES6转ES5等功能 , 开启不校验域名
关联.wpy格式: 点击右下角text模式文本,选择.wpy关联文件,输入vue
二、开发过程中问题记录
1.小程序弹窗禁止底部内容滚动
问题：在小程序页面中增加遮罩层后，底部页面依然可以跟随滑动
方法：catchtouchmove="preventTouchMove"
<!-- 遮罩层+actionSheet -->
<view class="cus-modal" wx:if="{{isShowModal}}" catchtouchmove="preventTouchMove">
<view class="actionSheet">
<view class="action-title">
<image src="" />
</view>
<view class="action-item">全部类型</view>
<view class="action-item">余额充值</view>
<view class="action-item">余额提现</view>
<view class="action-item">余额转入</view>
<view class="action-item">在线支付</view>
<view class="action-item">交易退款</view>
</view>
</view>
//同methods平级处
methods = {
//...
//...
}
preventTouchMove () {} //此处就是一个空方法
2.微信小程序取 dataset 值
方法：e.target.dataset.xxX
<block wx:for="{{detailTypeList}}" wx:key="index">
<view bindtap="chooseType" data-type="{{item}}" >{{item.type}}</view>
</block>
methods={
chooseType(e) {
console.log(e.target.dataset.type)
}
}
注意：e.target 确定是哪个触发的，dataset 对应 data- 开头的属性，type 是具体哪一个属性。注意：data-xxx，xxx 这里只能小写
3.自定义actionSheet和动画
注意：data中并未定义showModalStatus=false，若定义则在showModal()方法中 声明showModalStatus=true
<!-- actionsheet -->
<view class="cus-modal" wx:if="{{showModalStatus}}">
</view>
<view class="actionSheet" animation="{{animationData}}" wx:if="{{showModalStatus}}">
<view class="action-title">签到规则</view>
<view class="action-Content">
<view class="action-item">每天完成一次签到即可获得积分奖励</view>
<view class="action-item">每天完成一次签到即可获得积分奖励</view>
<view class="action-item">每天完成一次签到即可获得积分奖励</view>
</view>
<view class="action-confirm" bindtap="hideModal">知道了</view>
<!-- <view class="footer">
<view class="leftItem" bindtap="hideModal">取消</view>
<view class="rightItem" bindtap="hideModal">确认</view>
</view> -->
</view>
// 显示遮罩层
showModal() {
var animation = wx.createAnimation({
duration: 400,
timingFunction: 'ease',
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(
function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this),
100
)
},
// 隐藏遮罩层
hideModal() {
var animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease',
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export()
})
setTimeout(
function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this),
200
)
},
//部分样式
.cus-modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
background: rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.actionSheet {
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
text-align: center;
background: #fff;
border-radius: 8rpx 8rpx 0 0;
}
//底部取消确认
.footer {
height: 95rpx;
display: flex;
align-items: center;
margin-top: 59rpx;
justify-content: space-between;
border-top: 1rpx solid #EDEDED;
view {
width: 50%;
height: 95rpx;
line-height: 95rpx;
text-align: center;
font-size: 28rpx;
}
.leftItem {
color: #999;
border-right: 1rpx solid #EDEFF2;
}
.rightItem {
color: #438BFE;
}
}
4.自定义切换Tab
image.png
<view class="ticketStatus">
<view class="{{activeIndex==1?'active':''}} statusItem" bindtap="chooseStatus(1)">
<view>可用(3)</view>
<view class="b-line" wx:if="{{activeIndex==1}}"></view>
</view>
<view class="{{activeIndex==2?'active':''}} statusItem" bindtap="chooseStatus(2)">
<view>使用记录(4)</view>
<view class="b-line" wx:if="{{activeIndex==2}}"></view>
</view>
<view class="{{activeIndex==3?'active':''}} statusItem" bindtap="chooseStatus(3)">
<view>已过期(6)</view>
<view class="b-line" wx:if="{{activeIndex==3}}"></view>
</view>
</view>
data={
activeIndex: 1, // 当前选中的tab
};
methods={
chooseStatus(e) {
this.activeIndex = e
},
}
.ticketStatus {
background: #fff;
padding-top: 50rpx;
height: 70rpx;
display: flex;
justify-content: center;
.statusItem {
width: 33.33%;
font-size: 28rpx;
color: #999;
text-align: center;
.b-line {
width: 34rpx;
height: 4rpx;
display: inline-block;
background: #438BFE;
}
}
.active {
color: #333;
}
5.1自定义顶部导航栏（仅保留胶囊位置）
<template lang="wxml" minapp="wepy">
<view class="confirmOrder">
<view class="topItem g-container" style="padding-top:{{headertop}}">
<view class="topNav" style="height:{{navheight}};line-height:{{navheight}}">
<image class="nacBackImg" src="https://h5.jinghu.aoqq.com/miniApp/assets/homeImg/backWihte.png"
bindtap="handleBack" />
<view class="navTitle">确认订单</view>
<view class="navTitle"></view>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class confirmOrder extends wepy.page {
config = {
navigationBarTitleText: '确认订单',
navigationStyle: 'custom' //此处一定要设置
};
data = {
headertop: 0,
navheight: 0
};
onLoad() {
//
this.gethight()
}
methods = {
//
};
// 1. 获取胶囊高度
gethight() {
const res = wx.getMenuButtonBoundingClientRect()
// 2. 动态设置顶部返回按钮和文字距离头部的高度
this.headertop = res.top + 'px'
// 3.动态设置头部固定栏的高度
this.navheight = res.height + 6 + 'px'
}
}
</script>
<style lang="less" scoped>
.confirmOrder {
.topItem {
width: 100%;
//height: 446rpx; //400+46
box-sizing: border-box;
background: linear-gradient(to right, #5C9BFF 0%,#438BFE 50%, #438BFE 100%);
.topNav {
display: flex;
align-items: center;
justify-content: space-between;
height: 42rpx;
line-height: 42rpx;
background: #96f7d2;
.nacBackImg {
padding: 10rpx 50rpx 10rpx 10rpx;
width: 23rpx;
height: 42rpx;
vertical-align: center;
}
.navTitle {
font-size: 34rpx;
color: #fff;
}
}
}
}
</style>
5.2自定义终极版导航
<template lang="wxml" minapp="wepy">
<view class="myBankCard">
<view class="nav" style="padding-top:{{headertop}};height:{{navheight}}">
<!-- 头部navigationBar -->
<view class="headerTab" style="height:{{headerTab}}">
<view class="navTittle" style="line-height:{{headerTab}}">
<view class="navTittleText">我的银行卡</view>
</view>
<view class="backOne" style="height:{{headerTab}}" @tap="backOne">
<image class="backOneImg" src="https://h5.jinghu.aoqq.com/miniApp/assets/homeImg/back@2x.png" />
</view>
</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class myBankCard extends wepy.page {
config = {
navigationStyle: 'custom'
};
data = {
isCard: true,
safeHeight: '',
headertop: '',
navheight: '',
headerTab: '',
imgsHeight: ''
};
onLoad() {
// 获取首页中保存的苹果全面屏信息设置兼容性
const res = wepy.getStorageSync('safeHeight') || null
console.log('取到的手机信息', res)
if (res !== null) {
this.safeHeight = res
} else {
this.safeHeight = 0
}
this.gethight()
console.log('进入页面', this.headertop)
}
// 1. 获取胶囊高度
gethight() {
const res = wx.getMenuButtonBoundingClientRect()
console.log(res)
// 2. 动态设置顶部返回按钮和文字距离头部的高度
this.headertop = res.top + 'px'
// 3.动态设置头部固定栏的高度
this.navheight = res.height + 6 + 'px'
// 4.动态设置头部固定栏内标题和返回一行的高度
this.headerTab = res.height + 'px'
// 4.动态设置头部标题离邀请好友注册有礼的距离
this.imgsHeight = res.bottom + 6 + 'px'
}
methods = {
// 1.点击返回上一层 如果要多层 改变delta的值 。如果delta大于返回页的个数，则返回home
backOne() {
wepy.navigateBack({
delta: 1
})
}
};
}
</script>
<style lang="less">
page {
height: 100%;
// background-color: #f5f7fa;
width: 100%;
}
.myBankCard {
position: relative;
width: 100%;
overflow: hidden;
// background-color: #f5f7fa;
// 头部navigationBar
.nav {
width: 100%;
position: fixed;
background-color: #fff;
.headerTab {
overflow: hidden;
position: relative;
.navTittle {
padding: 0 80rpx 0 80rpx;
text-align: center;
}
.backOne {
position: absolute;
top: 0;
width: 40px;
.backOneImg {
width: 12px;
margin-left: 15px;
height: 20px;
position: absolute;
top: 5px;
}
}
.headerTab_tittle {
background-color: aqua;
height: 100%;
width: 30%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
.cityDown {
width: 18rpx;
height: 11rpx;
margin-left: 17rpx;
margin-top: -10rpx;
}
}
}
}
}
</style>
6.支付方式单选
image.png
<!-- 支付方式 -->
<view class="payTypeList" wx:elif="{{payTypeModal}}">
<view class="totalPrice"> ￥5999.00</view>
<view class="remainingTime">支付剩余时间 0:29:58</view>
<view class="payList">
<block wx:for="{{payTypeList}}" wx:key="index">
<view class="payItem" bindtap="choosePay({{item}})">
<image class="leftImg" src="{{item.img}}" />
<view class="rightItem">
<view>{{item.name}}</view>
<image
src="{{item.isChoose?'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/xz@2x.png':'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/wz@2x.png'}}" />
</view>
</view>
</block>
</view>
</view>
data={
payType: '余额支付', // 充值方式
payTypeList: [{
id: 1,
img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/yue.png',
name: '余额支付',
isChoose: true
}, {
id: 2,
img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/weixin@2x.png',
name: '微信支付',
isChoose: false
}, {
id: 3,
img: 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/zhifu@2x.png',
name: '支付宝支付',
isChoose: false
}]
};
methods={
// 选择支付方式
choosePay(e) {
this.payType = e.name
this.payTypeList.forEach(item => {
item.isChoose = false
})
let obj = this.payTypeList.find((item) => {
return item.id === e.id
})
obj.isChoose = true
},
}
7.小程序调用相册和拍照功能并调用接口获取图片路径
data={
leftPhoto:''
},
methods={
takeLeftPhoto() {
var that = this
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: '#a3a2a2',
success: function(res) {
if (!res.cancel) {
that.chooseWxImage()
}
}
})
},
};
chooseWxImage(type) {
var that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
let imageUrl = res.tempFilePaths[0] //保存手机本地虚拟地址
wx.uploadFile({
url: '***************imgUpload', // 后端上传图片接口地址
filePath: imageUrl, // 选择后的虚拟地址
name: 'file',
header: {
'Content-Type': 'multipart/form-data'
},
success: function (res) {
const resImg = JSON.parse(res.data) //用户选择图片后上传到服务器然后返回的图片链接地址
if (resImg.code === 0) {
// 给指定图片路径
that.leftPhoto=resImg.data
that.$apply()
}
}
})
}
})
}
8.商品评价 小星星数量
星星评分
wxml
<view class="tittle">商品评分</view>
<view class="stars">
<image class="star" wx:for="{{shopsStars}}" wx:key="index" src="{{item}}"
@tap="shopsStarTap({{index}})"/>
</view>
data
shopsStars: [ // 商品评分星星 默认是灰色的
'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png',
'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png'
],
methods
// 商品五星评价
shopsStarTap (index) {
let index = index // 获取当前点击的是第几颗星星
let len = this.shopsStars.length // 获取星星数组的长度
for (var i = 0; i < len; i++) {
if (i <= index) {
// 小于等于index的是满心
this.shopsStars[i] = 'https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star1.png'
} else {
// 其他是空心
this.shopsStars[i] ='https://h5.jinghu.aoqq.com/miniApp/assets/profileImg/star2.png'
}
}
},
9.小程序获取设备系统信息
wx.getSystemInfo({
success(res) {
console.log('系统信息:',res)
console.log('设备品牌:',res.brand)
}
})
/*返回值*/
brand 设备品牌
model 设备型号
pixelRatio 设备像素比
screenWidth 屏幕宽度，单位px
screenHeight 屏幕高度，单位px
windowWidth 可使用窗口宽度，单位px
windowHeight 可使用窗口高度，单位px
statusBarHeight 状态栏的高度，单位px
language 微信设置的语言
version 微信版本号
system 操作系统及版本
platform 客户端平台
fontSizeSetting 用户字体大小（单位px）。以微信客户端「我-设置-通用-字体大小」中的设置为准
SDKVersion 客户端基础库版本
benchmarkLevel 设备性能等级（仅Android小游戏）。取值为：-2 或 0（该设备无法运行小游戏），-1（性能未知），>=1（设备性能值，该值越高，设备性能越好，目前最高不到50）
