Como desarrollador front-end, saber cómo desarrollar applets de WeChat es ahora una habilidad indispensable, pero se necesita mucho tiempo para volver a aprender, aunque los applets nativos de WeChat son diferentes de los tradicionales H5, JS y CSS. No es muy grande, pero no está de acuerdo con nuestros pasos de desarrollo habituales. Seguramente pisará el foso y afectará el progreso del desarrollo. Por eso, en mi tiempo libre, elijo uni-app para estudiar.
introducción de la uni-aplicación:
uni-app es un marco que usa Vue.js para desarrollar todas las aplicaciones de front-end. Los desarrolladores escriben un conjunto de códigos que se pueden publicar en iOS, Android, H5 y varios programas pequeños (WeChat / Alipay / Baidu / Toutiao / QQ / Dingding) Y otras plataformas. Incluso si no es cross-terminal, uni-app también es un mejor marco de desarrollo de programas pequeños. Para obtener más detalles, consulte la evaluación. DCloud tiene 3,7 millones de usuarios desarrolladores y su aplicación uni-app tiene más de 50.000 casos, 800 complementos, más de 50 grupos WeChat / qq y está integrada por las herramientas de applet de Ali (ver detalles), los desarrolladores pueden estar seguros de elegir.
Esta es la introducción del sitio web oficial de uni-app: https://uniapp.dcloud.io/ Los amigos que estén interesados pueden ir y estudiarlo detenidamente. No diré mucho aquí. En resumen, se puede usar un conjunto de códigos por el compilador. Se usa en una plataforma, y lo más destacado es que usa Vue.js para desarrollar todos los marcos de aplicaciones de front-end, que están perfectamente conectados a mi pila de tecnología (¿puedo desarrollar directamente uni-app?). Después de todo, no lo es. Al compilar vue en un programa pequeño, debe considerar si existen todas las API que se utilizan actualmente en el programa pequeño.
Por ejemplo, recientemente escribí una pequeña demostración de deportes imitando a Keep. Al final de una ronda de ejercicio, quiero usar audio para la reproducción automática de música. Cuando termine de escribir, realice una prueba de compilación. El pequeño programa informa un error: audio play El método no está definido, así que fui a buscar la documentación del applet.
Tomando esto como ejemplo, quiero decir que aunque la pila de tecnología corresponde básicamente, todavía hay pozos grandes y pequeños en los que debemos pisar, pero es mucho más conveniente que aprender los applets de WeChat desde cero. ¡Después de todo, pisar un pozo es también una acumulación de conocimientos propios!
Entremos en el tema, la aplicación práctica del terminal del applet WeChat de uni-app:
El método de solicitud más común:
// 默认方式
uni.request({
url: 'https://www.example.com/request',
success: (res) => {
console.log(res.data);
}
});
// Promise
uni.request({
url: 'https://www.example.com/request'
})
.then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
var [error, res] = data;
console.log(res.data);
})
// Await
function async request () {
var [error, res] = await uni.request({
url: 'https://www.example.com/request'
});
console.log(res.data);
}
Configuración común: el mismo método de escritura en Page.js y applet, debe tenerse en cuenta que el ícono debe tener menos de 40kb
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
}
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
}
}
Configurar en manifest.js, principalmente applet AppleID
No entraré en detalles sobre cómo hacer que el compilador se ejecute en el subprograma WeChat, solo sigue este: https://jingyan.baidu.com/article/f0e83a2558580022e591018b.html
para resumir:
Básicamente, siempre que haya una pila de tecnología vue, se puede llevar a cabo un desarrollo de demostración simple mirando la documentación de la uni-aplicación, y el proceso de pisar el pozo se considera la acumulación de crecimiento y experiencia. ~