mpvue

作者: Live_60c3 | 来源:发表于2018-11-07 08:10 被阅读0次

    一、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包

    相关文章

      网友评论

          本文标题:mpvue

          本文链接:https://www.haomeiwen.com/subject/xtlmxqtx.html