项目空闲时间，来做一波温故知新。
当前时期的需求是做一个拼团的小程序。
在这之前在做一个微信公众号H5项目，技术栈是Vue全家桶（vue+router+vuex+vant...）。在新的小程序项目中有很多组件类似于之前项目的组件，所以决定使用mpvue作为基础来搭建项目。
mpvue框架基于
Vue.js核心，mpvue修改了Vue.js的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。
简而言之，就是可以用类似vue的语法来开发小程序，通过mpvue配置好的各种loader来将vue文件转换为小程序需要的wxml,wxss等
站在巨人的肩膀上，别人的分享为我提供了很多的方便。下面介绍项目的第一步，搭建环境。
从第一步搭建环境开始记录。建议使用cnpm，开发过程中会需要填写appid等信息，不过要是练手的话也可以不用填
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
上面流程走完，项目中会多出一个dist文件夹，这就是生成的微信小程序项目。OK，然后打开微信开发者工具，选择小程序----体验模式（没有appid时），将项目目录指向刚刚生成的dist文件夹。好了，页面出来了。
这就完了？
当然
没有
需要知道的地方：
1.最重要的当然是看文档，mpvue的文档相当的简单，是我辈开发者的最爱。
2.自己的代码在/src里面，每个页面一个文件夹，包含这三个文件
image.png
- index.vue 这是页面主页文件，完全和vue的语法相同，可以放心食用
-
main.js 这个是将vue实例化的一个文件，建议不要修改，即每个页面文件夹都是这样
image.png
-
main.json 看过小程序文档的都知道，这个文件可以用来配置小程序顶部tab的标题和颜色之类的东西
image.png
3.在/build/utils.js文件夹里，有一堆配置，初学者可以不用管它三七二十一的。不过需要修改一下px2rpxLoader的属性，这里的意思是将css代码中的px转换成小程序的rpx（小程序标配的尺寸，自适应效果很好）原本基础配置是2比1，意思是将2px转换成1rpx。我们将它改成1比1，这样就可以直接按照标注图上的px单位来敲代码了。
var px2rpxLoader = {
loader: 'px2rpx-loader',
options: {
baseDpr: 1,
rpxUnit: 1
}
}
4.配置环境变量
为了统一并且方便，我们通常都会配置一个环境变量来保持dev和product的代码统一。
/config/dev.env.jsdev版本
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
//服务器域名，这里展示测试服的服务器地址
API_ROOT:'"http://beta.baidu.com"'
})
/config/prod.env.jsproduct版本
module.exports = {
NODE_ENV: '"production"',
// 服务器域名
API_ROOT:'"http://baidu.com"'
}
取值：这样就能在代码一致的情况下，配置不同的地址（其他更多不同的地方）。
const url = process.env.API_ROOT;
我说使用到的环境搭建以及基本配置就已经完成了。
订个计划吧，在该系列中我会记录以下问题
- 小程序页面跳转路由问题，路由栈问题
- 添加页面问题
- vue和小程序生命周期的和谐处理方式
- 页面之间传值的问题
- 常用的小程序原生组件问题
- 第三方库的处理方式
网友评论