作为一个前端开发人员,会开发微信小程序现在已经是一个必不可少的技能,但是,要重新去学又要花费大量的时间,虽然原生的微信小程序中和传统的H5、JS、CSS差别不是很大但是也不是按照我们平时的开发步骤,势必会踩到坑影响开发进度,所以,在业余时间,我选择了uni-app进行学习。
uni-app介绍:
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。详见评测DCloud公司拥有370万开发者用户,旗下uni-app有5万+案例、800款插件、50+微信/qq群,并且被阿里小程序工具内置(详见),开发者可以放心选择。
这是uni-app官网的介绍:https://uniapp.dcloud.io/ 有兴趣的朋友可以去仔细研究,这里就不多说了,简而言之,就是一套代码可以通过编译器在多个平台上使用,而且亮点是它是使用Vue.js开发所有前端应用框架,这就和我的技术栈完美对接了(我可以直接进行uni-app开发了?)事实上也并不是,毕竟从vue编译成小程序时,要考虑小程序那边是否有当前使用的所有api。
例如我最近在模仿keep写一个小型的运动demo,在一轮运动结束时,我想用 audio进行自动音乐播放,当我写完的时候,进行编译测试,小程序端报错的是:audio的play方法为undefined,于是我去查找了小程序的文档。
以这个为例就是想说,虽然技术栈基本对应,但是还是有大大小小的坑需要我们踩,但是比之前从零开始学微信小程序就方便很多了。毕竟踩坑也是对自己知识的一种积累嘛!
下面进入正题,uni-app的微信小程序端的实际运用:
最常见的请求方式:
// 默认方式
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);
}
常见的配置:Page.js内和小程序一样的写法,需要注意的是 icon 需要小于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"
}
}
}
在manifest.js中进行配置,主要是小程序AppleID
对于如何让编译器运行到微信小程序这里就不再多赘述了,按照这个就行了:https://jingyan.baidu.com/article/f0e83a2558580022e591018b.html
总结:
基本上只要有vue的技术栈,稍微看一下uni-app的文档就可以进行简单的demo开发了,把踩坑的过程当作成长和经验的积累继续走下去吧!~