一, 小程序 wepy 初始化
详情可参考 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
二, 开发过程中问题记录
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. 自定义顶部菜单栏 (仅保留胶囊位置)
- <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>
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'
- }
- }
- },
来源: http://www.jianshu.com/p/aed0363c82d7