mpvue

一、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 [email protected]
    
    # 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包

你可能感兴趣的:(mpvue)