一、mpvue:是一个由美团开发的使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心
二、搭建环境
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart 项目名称
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
注意:如果安装好,运行npm run dev出现报错,解决方案:
所以只要打开根目录的 project.config.json文件
把其中的 "miniprogramRoot": "./dist/" 修改为 "miniprogramRoot": "./dist/wx/"
就好了
在mpvue中与后台数据交互:flyio,wx.request()
使用flyio步骤:
第一步:先安装flyio
npm install flyio
第二步 在main.js中引入flyio并注册到vue的原型上
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly;
Vue.prototype.$http=fly
第三步 在请求后台接口的页面中使用flyio
例如:
this.$http.get('https://fzx666.gitee.io/bbm_api/BBM-data.json')
.then(res=>{
console.log(res.data.import)
this.list=res.data.import
})
如何在页面中使用富文本: v-html=""不行的,则使用mpvue-wxparse
如果不在mpvue中使用,直接在微信小程序中使用wxparse包
网友评论