使用mpvue开发小程序
demo github地址: https://github.com/zkl904/mpvueFX.git
注意：这里用的小程序平台的网址用的是我个人的账号链接， 所以登录的时候会要求重新登录， 使用自己的账号即可
1: 小程序账号的注册
小程序文档地址: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
小程序平台登陆: https://mp.weixin.qq.com/
小程序开发者工具下载; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
获取appid 以及 appsecret: https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=674021264&lang=zh_CN
1.1步骤:
1. 先申请一个小程序账号
3个 步骤: 账号信息 => 邮箱激活 => 信息登陆
1.png
这三个步骤填写完成后 进入小程序平台,
1. 填好小程序信息
image.png
2. 添加相应的开发者
image.png
2. 下载好开发者工具
小程序开发者工具下载; https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3. 使用mpvue 进行小程序的开发
vue官网: https://cn.vuejs.org/
mpvue官网: http://mpvue.com/
mpvue项目合集: https://github.com/Meituan-Dianping/mpvue/issues/21
mpvue中出现的一些问题以及相应的解决方法: https://github.com/Meituan-Dianping/mpvue/issues
mpvue组件工具合集: https://github.com/mpvue/awesome-mpvue
注: 使用mpvue 需要一定的vue基础 , 开始使用之前最好先熟悉一些vue相关的一些语法
原生开发小程序 和 wepy 、 mpvue 对比
image.png
整体来说, 使用mpvue来开发小程序学习成本是最低的
3.1 开始搭建mpvue项目
(1): 若是之前没有安装过vue-cli , 先安装vue-cli
(2): 开始创建mpvue 项目
$ npm install -g vue-cli // 全局安装vue-cli
$ vue init mpvue/mpvue-quickstart my-project // 快速生成项目模版
image.png
其中appid查看 :
image.png
这样就建好了一个项目快速启动模板
(3): 安装相应的插件
(4): 编译一下文件 , 生成一个dist 文件, 小程序使用的代码就是这里的dist代码
$ npm install // 安装相应的插件
$ npm run dev // 编译生成一个dist文件
注: 项目拉下来之后记得先编译一下 , 生成dist 文件
image.png
关于微信开发者工具的使用: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
3.2 上传代码功能
上传完代码之后可以在 https://mp.weixin.qq.com/wxopen/wacodepage?action=getcodepage&token=194289795&lang=zh_CN 中看到
image.png
image.png
注: 这里的开发版本 只会有一个 , 之前有的 会被后上的给顶掉
3.3 编写一个简单的小程序页面
首先是页面的结构 :
image.png
注: 一个页面上有三个配置 , 分别是 xx.json xx.vue main.js 其中xx.json 是页面配置文件 , xx.vue 是页面的主代码 , main.js 是页面的入口文件 ,三个文件组成一个完整的页面 , 而且每次新增一个页面都必须要重新 npm run dev 一下重新编译dist文件 , 十分的不方便, 后面使用mpvue-entry 和 mpvue-router-patch来整合和简洁化页面
3.3.1 安装stylus 和 stylus-loader
可以使用stylus 来编写css
stylus文档: https://www.zhangxinxu.com/jq/stylus/
$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev
验证下是否可以使用stylus , 在style标签中添加 lang="stylus" rel="stylesheet/stylus"
image.png
3.3.2安装mpvue-entry 和 mpvue-router-path
mpvue-entry文档 : https://www.npmjs.com/package/mpvue-entry?activeTab=readme
mpvue-rotuer-patch 文档: http://npm.taobao.org/package/mpvue-router-patch
$ npm install mpvue-entry -D
$ npm install mpvue-router-patch -D
3.3.2.1: mpvue-entry 相关配置
(1): 在src 文件夹下面 建一个router 文件夹 , 在新建一个index.js 文件 , 做为路由页面的编写
image.png
(2): 在webpack.base.conf.js 中进行相应的配置
image.png
注: 在mpvue-loader 1.10 版本后 , 注意 需要 删去plugins中的一段
/*webpack.base.conf.js 页面*/
const MpvueEntry = require('mpvue-entry')
....
const entry = MpvueEntry.getEntry({
pages: 'src/router/index.js',
main: 'src/main.js'
})
module.exports = {
entry,
...
plugins: [
new MpvuePlugin(),
new MpvueEntry(),
/*new CopyWebpackPlugin([{ // 这段需要注释掉, 不然会报错
from: '**!/!*.json',
to: ''
}], {
context: 'src/'
}),*/
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: path.resolve(__dirname, '../dist/static'),
ignore: ['.*']
}
])
]
}
/* router/index 页面的配置 */
// 重新配置一下页面 支持新增页面热更新
module.exports = [
{
path: 'pages/index/index',
config: {
navigationBarTitleText: '首页',
}
},
{
path: 'pages/counter/index',
config: {
navigationBarTitleText: 'counter页面',
}
}
]
3.3.2.2: mpvue-router-patch 相关配置
// src下面的main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
安装完后检测下是否可以使用 router语法:
新建一个home页面
<template>
<div>
....
<div @click="goHome">点我去home页面</div>
</div>
</template>
<script>
export default {
data() {
},
methods: {
goHome() {
this.$router.push('/pages/home/index')
}
}
}
</script>
4. mpvue 的一些坑点
(1) : mpvue项目中所有页面的 created 函数都会在最开始就执行 , 即使这个页面没有运行 解决方法; 使用小程序的 onLoad 函数 或者 onShow函数 代替 (要让tabar页面进入就调用一次接口就用onShow)
image.png
image.png
(2): 本地图片处理方法, 在小程序中要是使用background的话, 必须得是远程图片 , 本地图片也是可以的, 但是得小于8k , 因为 mpvue会把它编译成base64格式的 , 不能被编译成base64的图片一律放在static中 , img需要的 图片要是放在本地的话 , 要放在static中 ,而不要放在相邻的images文件夹中 (最好把图片都放在服务器上面 , 小程序编译大小得小于2m)
image.png
image.png
(3): class 与 style 要是使用computed绑定的话 , 是不能 return 一个 object对象的 (这样的写法在vue中是很常用的, 当时mpvue中不行, 而且不会报错,很坑 , 但是页面上不会有效果)
image.png
image.png
(4): 小程序中不支持dom操作 , 因为小程序没有dom , 因此vue中的 ref 不能用
image.png
(5): mpvue中 不能随意的调用method中的方法 , 除了@click, @input 这种 , 其余的情况在template中是不能调用函数方法的 , 这个很坑, 只能调用computed计算属性代替 ,但是computed不能传递参数 , 那些实在需要参 数的可以使用组件来代替
image.png
image.png
(6): 小程序中不能使用过滤器 , 解决方法 ; (1) : 使用computed 代替 , 平时是还可以 , 但是在v-for得传递一个item参数, 就不能使用这个方法了 (2) : 编写一个filter组件 , 使用props 来传递参数
详情见代码文件
(7): 写在template中的行内样式中的px是不会转化为rpx的 , 因此行内样式直接用rpx 就可以了(也就是style里面的样式) css中的样式都会转化为rpx 格式 (px2rpx-loader插件)
image.png
这里的换算关系: rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应 ,在小程序中规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px, iPhone5为320px , iPhone6s: 414px
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = (320/750) = 0.42px 1px =(750/320) = 2.34px
iPhone6 1rpx =(375/750) = 0.5px 1px =(750/375) = 2rpx
iPhone6s 1rpx =(414/750) = 0.552px 1px =(750/414) = 1.81rpx
image.png
image.png
(8): 在mpvue的css中使用*选择所有的元素是不起效果的 (不会报错,但是无效 , 并不会进行变色)
image.png
image.png
(9): 在小程序中使用animate动画, 可以使用微信的animation动画api , 但是微信的animation不提供循环功能 , 可以使用css3的动画 , 注: 使用@keyframes 的时候要加上前缀 , 不然编译的时候stylus会把前缀都写上, 其 中的-moz-, -o- 这两个就会引起报错 , 因此可以直接加上前缀 @ -webkit-keyframes
直接使用@keyframes报错 具体暂时看代码
image.png
image.png
