利用mpvue开发微信小程序

　　最近公司部门负责人提出需求须要开发一款微信小程序，因为本人以前是作前端开发的，对于小程序开发一窍不通，可是不少时候咱们都是把不会作变成我会学。因而便在网上寻找小程序开发教程，相比于相生的小程序开发，本人更倾向于美团的mpvue框架，由于此框架是基于vue开发的，而偏偏我前端开发技术就是vue，甚是美哉，花了半天时间学习了一下mpvue，便开始了小程序开发之旅，固然mpvue小程序开发也有不少坑。

　　mpvue是由美团研发的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其能够运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。小程序的时间案例有美团酒旅、餐饮、到店、金融等业务接入。你们能够直接点击这里去mpvue官网学习下。

　　下面我给你们先介绍如何用mpvue快速建立小程序，在建立小程序以前你们首先须要去申请一个小程序帐号，具体申请细则看这里

　　

 1 # 全局安装 vue-cli
 2 npm install --global vue-cli
 3 # 建立一个基于 mpvue-quickstart 模板的新项目
 4 vue init mpvue/mpvue-quickstart my-project
 5 
 6 # 安装依赖
 7 cd my-project
 8 npm install
 9 启动构建
10 npm run dev

View Code

　　这样一个基于mpvue的小程序框架就已经搭建好了，接下来下载微信开发工具，点这里，安装好微信开发工具打开选择小程序

　　而后新增项目，选择项目目录为刚才建立的项目目录，打开就好

　　到这里整个小程序项目建立完成，接下来就是小程序开发，给你们看一下mpvue建立的小程序目录结构

　　page下面对应每一个文件夹就是一个小程序页面，小程序的跳转路由在app.json文件中配置 ，配置代码以下

　　

 1 {
 2   "pages": [
 3     "pages/shopList/main"
 4   ],
 5   "window": {
 6     "backgroundTextStyle": "light",
 7     "navigationBarBackgroundColor": "#fff",
 8     "navigationBarTitleText": "中科云溯",
 9     "navigationBarTextStyle": "black"
10   }
11 }

View Code

小程序开发用到的全部API请看这里。学会了吧，请开始你的小程序开发之旅吧