企业微信uni-app开发准备
一、下载安装 HbuilderX
https://www.dcloud.io/
文章图片
image.png
二、环境准备
1.可以选择配置自己习惯的使用环境
文章图片
图片1.png
2.安装插件包，工具-插件安装
---安装scss/sass编译
---安装npm
文章图片
图片2.png 三、uni-app开发介绍
1.目录结构
【企业微信uni-app开发准备】
图片3.png
2.页面配置、生命周期
① pages.json配置 ---
https://uniapp.dcloud.io/collocation/pages?id=pages
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "页面顶部显示导航",
"enablePullDownRefresh": "值为true/false，配置是否开启下拉刷新功能",
}
}
注：开启下拉刷新需要在 pages.json做相应的配置
图片4.png
图片5.png 四、项目准备
Git地址：http://git.aylsonclub.com/aihama/uniapp-oa-wap.git
五、页面代码
页面或组件由三部分组成
---xml代码，类似html代码
---js代码
--样式代码
Script代码中都需要导出一个 响应对象
里面主要包含有
（1）Props组件传入的参数对象数据
（2）Data 一般用于储存页面对应绑定的数据
（3）Methods 主要放置自定义函数方法
文章图片
ddd.png
六、常用语法
示例数据
export default {
data() {
return {
mobile: '1234',
password: '123',
datas: [{
text: 'xxxxxx'
}, {
text: 'xxxxxx'
}, {
text: 'xxxxxx'
}],
objects: {
a: 1,
b: 2,
c: 3
}
}
},
methods: {
submit: () => {
console.log('-----------提交')
}
}
}
1.集合遍历 v-for
{{item.text}}
2.集合遍历 map
{{val}} {{key}}
2.v-if 判断语句
{{item.text}}
3.:class 处理
{{item.text}}
4.事件绑定，在移动端使用tap触摸事件一般不使用click
4.表单提交
// xml代码
//js代码七、数据请求
let params = {
Code: 'xxx',
Password: 'pwd'
};
http.login(params).then(res => {
uni.hideLoading();
if (res.statusCode !== 200) return;
if (res.data.code === "ok") {
setCurLoginPage();
uni.showToast({
title: "登录成功444"
});
// 储存用户信息到缓存
let adminWapUserInfo = res.data.data;
uni.setStorageSync("adminWapUserInfo", adminWapUserInfo);
// #ifdef APP-PLUS
this.updateDeviceInfo(adminWapUserInfo);
// #endif
// 跳转到首页
uni.switchTab({
url: "/pages/home/home"
});
} else {
uni.showModal({
content: res.data.msg
});
}
});
多个请求同时处理
let promise1 = new Promise((resolve, reject) => {
http.getList1({id:'xxx'}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})let promise2 = new Promise((resolve, reject) => {
http.getList2({id:'xxx'}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})Promise.all([promise1, promise2]).then(args => {
//请求成功逻辑，请求回来的数据在args 数组中
}).catch(err=>{
//请求失败报错逻辑
})七、消息弹窗
官网参考https://uniapp.dcloud.io/api/ui/prompt?id=showmodal
效果参考
uni.showToast({
title:'消息提示框'
})
文章图片
image.png
uni.showLoading({
title:'加载中'
})
文章图片
image.png 类似于标准 html 的消息框：alert、confirm。
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
文章图片
image.png 七、常用方法
页面路由跳转：https://uniapp.dcloud.io/api/router?id=navigateto
理解uniapp页面跳转-页面栈：https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e6%a0%88
主页面tabBar 切换：https://uniapp.dcloud.io/api/router?id=switchtab
常用组件：https://uniapp.dcloud.io/component/README
组件实际显示效果可新建项目--uni-app--Hello uni-app 项目运行查看效果
文章图片
Hello uni-app
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 员工的微信朋友圈是公司的宣传阵地吗（）
- FBI怎么和恐怖分子谈判
- 分享！如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 织网布局，社群营销走进山东玖零落地企业
- 微信小程序基础知识
- 使用Promise对微信小程序wx.request请求方法进行封装
- 剥削劳动力系列（企业家剥削你时，他要付出巨大的代价）
- 杰克·韦尔奇卸任演讲（决定企业未来的10个经营原则）
- 何以解忧，企业信息化、数字化选型焦虑之五·系统安全隐患大