uniapp开发-公众号h5、小程序、移动app

uniapp

官网

官网:https://uniapp.dcloud.io/

uniapp页面

页面布局:flex
	display、flex-direcoration、align-center、justify-content、align-item

字体图标:阿里图标库
	App.vue 全局引入
	网站:https://www.iconfont.cn/
开发标签:
	view image text button
标签属性:
	line-gradient word-wrap
	
模块组件:(https://uniapp.dcloud.io/component/uniui/uni-ui.html)
	uni-forms、uni-icons、upload-group、uni-file-picker、uni-easyinput
	jq validate 表单验证
	
配置:tabbar
	pages.json > pages 

全局周期:
	onLaunch、onShow、onHide
	
页面周期:
	onLoad、onShow、onHide、
	onPullDownRefresh、onReachBottom
	
属性(全局 | 局部):
	data、methods、filter
	watch、computed

uniapp扩展

store 存储
	state | matations(commit 同步) | actions(dispatch 异步)
	执行过程 dispatch -> commit -> state

http 网络封装
	uni.request (new Permise(resolve,reject) | url,data,header,method)
	
router 路由全局守卫
	网站:https://hhyang.cn/v2/start/quickstart.html
	to、from、next
	router.push | replace | replaceAll | pushTab | back

全局挂载(混合载入)绑定 main.js
	Vue.protype
	Vue.filter
	Vue.use
	Vue.mixin
	import xxx from xxx
	export default xxxx

npm 初始化

初始化:
	npm init
安装:
	npm install (npm install --save-dev @babel/plugin-syntax-dynamic-import)
	-g 全局安装
	--save-dev 当前目录(开发环境)
	--save 当前目录(开发&生产环境)
回退:指定版本
	npm update 依赖@版本(package.json)
卸载:
	npm uninstall (npm install --save-dev @babel/plugin-syntax-dynamic-import)

http请求封装

	common http.js
	导入 export export
	导出 import name from xxx name不能使用 '引号'

es6语法

class类 constructor extends super
常量 const 块域 {} 字符串模板 `${变量名}`  参数默认值 || 
结构拆包[]|{} =  不定参数(...args) 
for...of(不支持对象) symbol 箭头函数()=>{}

js

foreach(item,key,arr) 无返回值
map(item,key) 有返回值
Object.keys() 对象:属性 字符串:索引 数组:索引
Object.values()
Object.entries()
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log("验证失败!") }); } }) }
Uniapp中,我们可以通过使用相关插件或API实现公众号H5小程序微信授权登录功能。 对于公众号H5的授权登录,我们可以使用uni-login插件或通过uni.request发起微信官方授权登录的接口。首先,在公众号H5页面中,我们需要引入相应的JS-SDK,并使用wx.config配置公众号AppID和权限等信息。然后,在登录按钮的点击事件中,调用wx.checkSession来检查当前用户的登录态是否有效。若无效,再调用wx.login获取code,并通过wx.request发起后台请求来换取用户的access_token和openId等信息。最后,我们可以将这些信息保存起来,并根据需求进行相应的业务逻辑处理。 对于小程序的微信授权登录功能,在Uniapp中可以通过使用uni.login和uni.getUserInfo API来实现。首先,在小程序的入口页面中,在onLaunch生命周期里调用uni.login获取用户的登录凭证code,并将code传给后台服务器。后台服务器通过wx.login接口获取到用户信息后,再校验用户的身份。然后,在登录按钮的点击事件中,调用uni.getUserInfo获取用户的信息,并存入本地缓存,以供后续使用。接着,我们可以根据需要进行相应的业务逻辑处理。 需要注意的是,在实现公众号H5小程序微信授权登录功能时,我们需要保证项目中已经配置了相关的权限和配置信息,并正确处理各种回调和错误情况。同时,为了保护用户的隐私和安全,我们还需要合理处理用户信息的存储和使用,尽量避免泄露和滥用用户的个人信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值