vue转小程序（mpvue）踩坑
小程序开发文档说明
提前阅读：小程序开发社区
地址：https://developers.weixin.qq.com/
小程序
wxc9ef3e178e3891c5
f4ff0a22856837ee44d7884db3848f0d
1.基础配置
（1）前端框架：mpvue
官网地址：http://mpvue.com/mpvue/
安装简易过程
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install# 启动构建
$ npm run dev
接下来，你只需要启动微信开发者工具，引入项目即可预览到你的第一个 mpvue 小程序
（2）Ui框架：mpvue-weui
官网地址：http://kuangpf.com/mpvue-weui
下载至本地文档引用即可使用
2.配置说明
-- api ---接口方法调用文件
-- common ---封装的全局方法
-- font ---调用阿里矢量库的图标文件
-- config ---接口调用文件配置
-- tips ---工具类封装方法
-- store ---引用vuex状态管理文件
3.小程序iconfront图标库引用区别
引用文件类型：
（1）.css
（2）.ttf{由于小程序不支持处理ttf/woff/eot等文件，我们必须将子图文件转为base64格式再引入，直接使用源文件会提示几种字体文件没有上传，导致打包上传后字体无法显示。}
(转码地址：https://transfonter.org/)
***简易教程地址：https://blog.csdn.net/qq_31393401/article/details/80914607
4.小程序背景图的引用：
（1）线上网络
（2）转码base64 (转码地址：http://imgbase64.duoshitong.com/)
（3）图片通过image标签引入
5.配置每个页面对应的标题，在main.js
export default {
config: {
'navigationBarBackgroundColor': '#e86d5b',
'navigationBarTextStyle': 'write',
'navigationBarTitleText': '微信接口功能演示',
'backgroundColor': '#eeeeee',
'backgroundTextStyle': 'light'
}
}
6.小程序隐藏滚动条的设置（滚动条会影响到页面布局）
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
7.mpvue中配置vuex并持久化到本地Storage
需要登录注册功能的项目需要自己手动配置 cookie的使用
推荐文章：https://www.jb51.net/article/136482.htm
8.自定义上拉模态框
Html代码：
<view class="commodity_screen" bindtap="hideModal" v-if="showModalStatus"></view>
遮罩层
<view animation="animationData" class="commodity_attr_box" v-if="showModalStatus"></view>视图
Css代码：
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
.commodity_attr_box {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
padding-top: 20px;
}
Js代码：
// 模态框
showModal () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: 'linear',
delay: 0
})
this.animation = animation
animation.translateY(300).step()
// this.setData({
this.animationData = animation.export()
this.showModalStatus = true
// })
setTimeout(function () {
animation.translateY(0).step()
// this.setData({
this.animationData = animation.export()
// })
}.bind(this), 200)
},
hideModal () {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: 'linear',
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.animationData = animation.export()
setTimeout(function () {
animation.translateY(0).step()
this.animationData = animation.export()
this.showModalStatus = false
}.bind(this), 200)
}
9.页面跳转传值问题
小程序发送参数：
wx.navigateTo({
url: 'test?id=1'
})
接收参数：
Page({
onLoad: function(option){
console.log(option.query)
}
})
Mpvue框架下接收参数：
this.$root.$mp.query
注意：其调用需要在 onLoad 生命周期触发之后使用，比如 onShow 等
10.自定义输入模态框
<div class="showmodalone">
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" v-if="showModal"></view>
<view class="modal-dialog" v-if="showModal">
<view class="modal-title">支付密码</view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class="input-holder" type="password" class="input" placeholder="请输入密码"></input>
</view>
</view>
<view class="modal-footer">
<view class="btn-cancel" @click="showModal=false">取消</view>
<view class="btn-confirm" @click="showModal=false">确定</view>
</view>
</view>
</div>
样式位置：common.styl
11.同一组件中，v-for不能使用相同名称
