快速上手mpvue 项目

布满荆棘的人生 2021-09-19 14:54 440阅读 0赞

初始化一个 mpvue 项目

$ 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 my-project
    
    # 5. 安装依赖，走你
    $ cd my-project
    $ npm install
    $ npm run dev

![小程序项目配置][1240]

![image.png][]

分包机制 2018.7.23+  
mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构

webpack 配置  
注意事项  
新增的页面需要重新 npm run dev 来进行编译

使用手册  
mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致

# 全局安装 vue-cli
    $ npm install --global vue-cli
    
    # 创建一个基于 mpvue-quickstart 模板的新项目
    $ vue init mpvue/mpvue-quickstart my-project
    
    # 安装依赖
    $ cd my-project
    $ npm install
    # 启动构建
    $ npm run dev

框架原理  
mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力  
mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力  
修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

beforeCreate  
created  
beforeMount  
mounted  
beforeUpdate  
updated  
activated  
deactivated  
beforeDestroy  
destroyed

app 部分：

onLaunch，初始化  
onShow，当小程序启动，或从后台进入前台显示  
onHide，当小程序从前台进入后台  
page 部分：

onLoad，监听页面加载  
onShow，监听页面显示  
onReady，监听页面初次渲染完成  
onHide，监听页面隐藏  
onUnload，监听页面卸载  
onPullDownRefresh，监听用户下拉动作  
onReachBottom，页面上拉触底事件的处理函数  
onShareAppMessage，用户点击右上角分享  
onPageScroll，页面滚动  
onTabItemTap, 当前是 tab 页时，点击 tab 时触发

生命周期图示

![image.png][image.png 1]

事件处理器

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
    {
        click: 'tap',
        touchstart: 'touchstart',
        touchmove: 'touchmove',
        touchcancel: 'touchcancel',
        touchend: 'touchend',
        tap: 'tap',
        longtap: 'longtap',
        input: 'input',
        change: 'change',
        submit: 'submit',
        blur: 'blur',
        focus: 'focus',
        reset: 'reset',
        confirm: 'confirm',
        columnchange: 'columnchange',
        linechange: 'linechange',
        error: 'error',
        scrolltoupper: 'scrolltoupper',
        scrolltolower: 'scrolltolower',
        scroll: 'scroll'
    }

表单控件绑定

<template>
      <div>
        <picker @change="bindPickerChange" :value="index" :range="array">
          <view class="picker">
            当前选择：{
       {array[index]}}
          </view>
        </picker>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          index: 0,
          array: ['A', 'B', 'C']
        }
      },
      methods: {
        bindPickerChange (e) {
          console.log(e)
        }
      }
    }
    
    </script>

<template>
      <div>
        <radio-group class="radio-group" @change="radioChange">
          <label class="radio" v-for="(item, index) in items" :key="item.name">
            <radio :value="item.name" :checked="item.checked"/> {
       {item.value}}
          </label>
        </radio-group>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          items: [
            {name: 'USA', value: '美国'},
            {name: 'CHN', value: '中国', checked: 'true'},
            {name: 'BRA', value: '巴西'},
            {name: 'JPN', value: '日本'},
            {name: 'ENG', value: '英国'},
            {name: 'TUR', value: '法国'}
          ]
        }
      },
      methods: {
        radioChange (e) {
          console.log('radio发生change事件，携带value值为：', e.target.value)
        }
      }
    }
    
    </script>

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240 1]

吹逼交流群：**711613774**

![吹逼交流群][1240 2]

[1240]: /images/20210724/a245c7f09d3440d5b6a7fd145646addb.png
[image.png]: /images/20210724/f35ab52e9e414e819c58ef39ef8785a0.png
[image.png 1]: /images/20210724/5cd1017159304871800f20c3e022fbeb.png
[1240 1]: /images/20210724/b3d0460487934b058937348f41fbeb73.png
[1240 2]: /images/20210724/da45217839ce4208ad67be6f148ffffb.png