uni-app高分开源电影项目源码案例分析,支持一套代码发布小程序、APP平台多个平台(前端入门必看) (2)

在组件中,没有生命周期,对,你没看错!比如页面a引用了组件b 在组件b中,onLoad,onShow,onReady全部失效,不过用created和mounted是生效的,但是我在开发的时候还是没有用created和mounted,毕竟文档明确写到

img

所以我在组件中规避使用原vue的生命周期,另外,在上面说了ref,如果要在初始化使用ref要注意生命周期,在onload和show的钩子中,内部如果是同步操作是用不了的,拿不到$refs,我不知道怎么解释这个问题,在vue中很好解释,在created拿不到ref是因为dom还没有渲染出来,只有在mounted时dom渲染出来了才能拿到ref,但是uniapp中不是没得dom嘛。。。。。我也没深究过,如果要用,只能异步,可以加setTimeout 或者 放在某个请求后用,这个时候是可以拿到ref的

img

关于请求

我最开始的时候是自己简单的封装了一下发送的请求

export const HttpRequest_ = { config: function(name) { var info = null; if (name) { var name2 = name.split("."); //字符分割 if (name2.length > 1) { info = configdata[name2[0]][name2[1]] || null; } else { info = configdata[name] || null; } if (info == null) { let web_config = cache.get("web_config"); if (web_config) { if (name2.length > 1) { info = web_config[name2[0]][name2[1]] || null; } else { info = web_config[name] || null; } } } } return info; }, post: function(url, data, header) { header = header || "application/x-www-form-urlencoded"; //url = this.config("APIHOST")+url; return new Promise((succ, error) => { showLoading_() uni.request({ url: url, data: data, method: "POST", header: { "content-type": header }, success: function(result) { hidLoading_() succ.call(self, result.data) }, fail: function(e) { hidLoading_() error.call(self, e) } }) }).then(res=>{ console.log(res) return res },err=>{ console.log('err:',err) }) }, get: function(url, data, header) { header = header || "application/x-www-form-urlencoded"; //url = this.config("APIHOST")+url; return new Promise((succ, error) => { showLoading_()// 加载中 uni.request({ url: url, data: data, method: "GET", header: { "content-type": header }, success: function(result) { hidLoading_() //关闭加载中 succ.call(self, result.data) }, fail: function(e) { hidLoading_() //关闭加载中 error.call(self, e) } }) }).then(res=>{ console.log(res) return res },err=>{ uni.showToast({ duration:2000, title:'数据异常,请稍后再试', icon:'none' }) console.log('err:',err) }) } } 复制代码

之前我以为在Uniapp中发送请求只能用他们请求方法,后来同事说也可以用其他的。

我们便引入其他的库。这是uniapp插件市场别人封装好的,用起来还是比较舒服

ext.dcloud.net.cn/plugin?id=5…

动态的class style

具体的文档在这里:

uniapp.dcloud.io/use

我一开始是没有注意到这一点,按照我的一些常规习惯写并且一直在用h5调试,没有任何问题,后来上真机和小程序开发工具之后才发现全部失效。

打开第三方的网址或app

在app端想要打开第三方的网址或者程序,一定要区分ios和安卓端。

首先,ios和安卓唤起第三方app的地址是不一样的。

img

不管是在调试还是打包,要唤起第三方程序,在ios端要配置白名单

img

三方登录

以微信登录位例:

在app端,uni-app集成的几个方法,可以很顺利的拿到unionId,openid等一些列信息

uni.getProvider({//获取uniapp支持的第三方数据 service:'oauth' }).then(data=>{ var [err,res] = data var providers=res.provider//类型(微信,新浪,小米,qq) var flagIndex=providers.indexOf(provider) if(flagIndex>-1){ return providers[flagIndex] / } }).then(res=>{ return uni.login({//登陆接口(可以获取用户信息) provider:res, scopes:'auth_base', timeout:20000, }) }).then(data=>{//返回一系列登陆信息 var [err,res] = data if(res.errMsg==="login:ok"){ self.authResult=res.authResult return res.authResult } } }).then(res=>{//获取用户的信息 头像,地址,等等等 return uni.getUserInfo({ provider:provider, timeout:20000, withCredentials:true }) }).then(data=>{//得到一些列用户信息 var [err,res] = data console.log(res) if(res.errMsg==="getUserInfo:ok"){ return res } }) 复制代码

但是如果在小程序端,很多方法就失效了,因为小程序有一套自己的三方登录交互策略。

developers.weixin.qq.com/miniprogram…

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zypyyp.html