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{

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 {

100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

.commodity_attr_box {

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>

样式位置：common.styl

11.同一组件中，v-for不能使用相同名称