EMOS个人教程-第4章 利用UNI-APP创建移动端项目

1 章节介绍

2 申请微信开发者账号

2.1 小程序类型

• 企业类型
  -可以开发商业类小程序
  • 需要企业资质，并且缴费认证
  • 借用企业开发者身份
    • 开发&真机调试
    • 不能上架发布小程序
• 个人类型
  • 开发非商业类小程序
  • 需要个人实名认证

AppID(小程序ID)
wx2efa8aa96be5279c

原始ID
gh_18879ec1a6e4

2.2 获取AppId和密钥

3 创建小程序项目

• 项目类型为uni-app
• 填写AppId
• 编译运行小程序
  • 模拟器运行
  • 真机运行
• uni-app简介
  • 基于VUE的跨平台移动端框架
    • 语法简单
    • 学习成本很低
  • 跨平台性
    • 微信小程序
    • 支付宝小程序
    • QQ小程序
    • H5 APP
    • 安卓APP
    • iOS APP
    • H5 网站

4 初识uni-app项目

• 目录结构
• 基础语法
  • 插值输出
  • 条件判断
  • 循环输出
  • 事件处理
  • 双向绑定

5 创建登陆页面

5.1 设计登陆页面

• login.vue
• login.less

5.2 完成登陆

• 获取OpenId
  • 获取微信临时授权
  • 换取OpenId字符串
• 判定登陆
  • 查询用户表中的OpenId
  • 用户账号必须是有效状态的
• 查询用户信息
  • 基本信息
  • 权限信息
• 生成令牌

6 创建注册页面

6.1 设计注册页面

• register.vue
• register.less

6.2 完成注册功能

• 获取OpenId
  • 获取微信临时授权
  • 换取OpenId字符串
• 获取微信帐户基本信息
• 验证激活码
  • 超级管理员激活码
    • 验证用户表是否存在超级管理员？
    • 检查用户表的root字段
  • 普通员工激活码
• 把用户记录和微信账号绑定
  • 保存员工信息
  • 查询员工记录ID

7 注册新用户的业务要点说明

8 获取临时授权和微信基本信息

<button class="register-btn" open-type="getUserInfo" @tap="register">执行注册</button>

register: function(){
					let that = this;
					uni.login({
						provider:"weixin",
						success:function(resp){
							console.log(resp)
							let code = resp.code;
							uni.getUserInfo({
								provider:"weixin",
								success: function(resp){
									console.log(resp)
									let nickName = resp.userInfo.nickName;
									let avatarUrl = resp.userInfo.avatarUrl;
								}
							})
							
						},
						fail:function(e){
							uni.showToast({
								title: '执行异常'
							});
						}
					})
				}
			
		}
	}

9 章节总结