Используйте mpvue для разработки апплета WeChat

Попробуйте использовать уценку для написания статьи, просто сосредоточьтесь на содержании и оставьте макет инструменту.

Эта статья в основном знакома с сочетаниями клавиш уценки и знакомит с апплетом разработки mpvue.

После разработки простого нативного апплета WeChat я почувствовал, что для разработки апплета использовался mpvue с открытым исходным кодом Meituan, благодаря чему программистам, не знакомым с синтаксисом апплета, не нужно тратить слишком много усилий на ознакомление с официальной документацией. апплета и использовать синтаксис vue для разработки.

Знакомство с мпвуе

mpvue — это фреймворк для разработки небольших программ с использованием Vue.js (проект Meituan с открытым исходным кодом). Фреймворк основан на ядре Vue.js, а mpvue модифицирует среду выполнения и реализацию компилятора Vue.js, чтобы он мог работать в среде апплета, тем самым предоставляя весь набор возможностей разработки Vue.js для разработки апплета.

демонстрационный адрес

gitup-адрес

адрес блога

Шаг 1: Просмотрите документацию, чтобы быстро создать простой проект mpvue.

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

Здесь я отменяю vuex (управление состоянием) и ESlint (проверка кода), т.к. мне не нравится спецификация обнаружения пробелов и ;, можете настроить под свои нужды.

Шаг 2: Измените код, откройте каталог dist с помощью инструмента разработчика WeChat и проверьте, есть ли какие-либо изменения.

step3: инкапсулировать api и http запросы (здесь используется flyio, кроме отмены запроса, остальные функции в принципе аналогичны axios, размер всего 4кб, что составляет треть от axios)

Добавьте зависимости в package.json или npm install flyio

 1 var Fly=require("../lib/wx") //wx.js为您下载的源码文件
 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
 3 var fly=new Fly(); //创建fly实例
 4 
 5 //添加拦截器
 6 fly.interceptors.request.use((config,promise)=>{
 7     //给所有请求添加自定义header
 8     config.headers["X-Tag"]="flyio";
 9     return config;
10 })
11 //配置请求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14 
15 Page({
16   //事件处理函数
17   bindViewTap: function() {
18     //调用
19     fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20       //输出请求数据
21       console.log(d.data)
22       //输出响应头
23       console.log(d.header)
24     }).catch(err=>{
25       console.log(err.status,err.message)
26     })
27     ...
28   })
29 })

Шаг 4: Смонтируйте API-интерфейс запроса и проекта, инкапсулированный flyio, в объект-прототип в качестве библиотеки компонентов, чтобы каждой отдельной странице vue не нужно было импортировать инкапсулированный js, и напрямую использовать this.$http для вызова метода.(официальная документация flyio)

httpUtil.js

Нажмите, чтобы развернуть код

 var Fly=require("../lib/wx") //wx.js为您下载的源码文件
 2 // var Fly=require("flyio/dist/npm/wx") //npm引入方式
 3 var fly=new Fly(); //创建fly实例
 4 
 5 //添加拦截器
 6 fly.interceptors.request.use((config,promise)=>{
 7     //给所有请求添加自定义header
 8     config.headers["X-Tag"]="flyio";
 9     return config;
10 })
11 //配置请求基地址
12 fly.config.baseURL="https://wendux.github.io/"
13 ...
14 
15 Page({
16   //事件处理函数
17   bindViewTap: function() {
18     //调用
19     fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
20       //输出请求数据
21       console.log(d.data)
22       //输出响应头
23       console.log(d.header)
24     }).catch(err=>{
25       console.log(err.status,err.message)
26     })
27     ...
28   })
29 })

apiUtil.js

Нажмите, чтобы развернуть код

1 /**
 2  * Created by yuchen on 2018/4/2.
 3  */
 4 //封装httpApi
 5 import request from './httpUtil'
 6 const host = "https://XXX.cn"
 7 const api = {
 8   // test地址
 9   authorList:() => request.get(`${host}/index/list_author_recommend.html`)
10 }
11 
12 // export default api
13 export default { //作为组件库(install)
14   install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http)
15     Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上
16   }
17 }

step5: компонент vue (компонент карты создается в официальном проекте mpvue, здесь учтите, что класс нужно прописать внутри компонента, иначе он не будет рендериться)

Шаг 6: переход на страницу и перемещение (здесь MPVUE не поддерживает Vue-Router)

Используйте метод перехода на страницу WeChat, а затем используйте this.$root.$mp.query, чтобы получить параметры при переходе на страницу.

Шаг 7: Внедрите weui и проверьте эффект (введите библиотеку пользовательского интерфейса в соответствии с вашими потребностями, не поддерживайте elementUI или не используйте ее).

Загрузите weui.css в проект, импортируйте css, например: import '../static/weui/weui.css'

Пейнтбол: Добавьте моменты, на которые нужно обратить внимание при использовании mpvue (Подробности смотрите в официальной документации)

1. Новые страницы необходимо перезапустить с помощью npm run dev.

2. Все BOM/DOM в апплете не могут быть использованы, т. е. нельзя использовать инструкцию v-html.

3. Использование привязок Class и Style к компонентам на данный момент не поддерживается, и это необходимо прописать внутри компонента.

4. mpvue может поддерживать собственные компоненты апплета, такие как средство выбора, карта и т. д. Следует отметить, что привязка событий к собственному компоненту должна быть связана с синтаксисом привязки событий vue, например bindchange=" eventName", нужно написать @change="eventName".

5. mpvue рекомендует использовать метод привязки v-model.lazy для оптимизации производительности.Кроме того, может возникнуть проблема со сбросом курсора при вводе v-model в поле ввода под старой базовой библиотекой.

6. При написании перехода на страницу передайте динамические параметры, которые должны быть записаны как :url, например:

7. Используйте этот.$root.$mp.query для получения параметров, переданных апплетом на странице onLoad. Используйте this.$root.$mp.appOptions, чтобы получить параметры, передаваемые апплетом, когда приложение находится в состоянии onLaunch/onShow.

8. Чтобы использовать этот.$root.$mp.query для получения параметров, вам нужно получить их в monted, а в созданном он сообщит Cannot read property 'query' of undefined .