个人中心开发遇到的问题
- 向网页传递信息要使用头条api的bindmessage
官方说明“网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息”
// 在小程序中调起H5中的打电话功能 onmessage (e) { let { phoneNumber, name } = e.detail if(name == 'makePhoneCall'){ uni.makePhoneCall({ number: phoneNumber }) } }
需要注意的web-view的bindmessage属性并不是实时的
- 真机拨打电话功能不能用
// 使用uni.makePhoneCall真机没反应 uni.makePhoneCall({ phoneNumber: '114'});
解决：改为头条api的tt开头
// 真机模拟器均可正常使用 tt.makePhoneCall({ phoneNumber: '114'});
登录开发
- 头条授权登录效果
- 百度授权登录效果
- 大致思路：
1.首先获取获取服务供应商的信息
2.调用uni.getProvider获取授权code
3.获取用户的手机号（用户登录头条app的）
4.从@getphonenumber回调中获取到用户信息
5.调用授权登录服务api
6.获取token, openid等信息
// template <view class="login-page"> <view class="title"> <view class="h-line"></view> <view class="page-title">授权登录更快捷</view> <view class="h-line"></view> </view> <view class="authLogin-wrapper"> <!-- #ifdef MP-BAIDU --> <button type="default" open-type="getPhoneNumber" @getphonenumber="authLoginTap" class="login authLogin">百度登录更快捷</button> <!-- #endif --> <!-- #ifdef MP-TOUTIAO --> <button type="default" class="login authLogin" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" >授权手机号快捷登录</button> <!-- #endif --> </view> </view>
// 完成渲染调用授权code方法 mounted () { this.getCode() }
// 获取授权code方法 async getCode () { const [ errorProvider, provider ] = await uni.getProvider({ service: 'oauth' }) if (errorProvider) { console.log('获取provider失败') return } const [ errLogin, data ] = await uni.login({ provider: provider.provider[0], force: true }) if (errLogin) { console.log('获取code失败') // 失败的操作，提示等 return } const { code } = data this.code = code }, // 头条获取到用户信息 async onGetPhoneNumber ({ detail }) { const { errMsg } = detail // 授权失败 if (errMsg.indexOf('auth deny') > -1) { // 取消授权进行手机验证码登录 return } try { // 调用服务授权接口 const { data } = await authLogin({ code: this.code, ...detail, }) if (data.code === SUCCESS) { // 存token, openid等操作 // 重新更新个人信息 } else { // 失败的提示等 } } catch (error) { // 登录失败异常情况处理 } }, // 百度获取到用户信息同理头条。。。
登录开发遇到的问题
手机验证码开发时，引入checkbox-group报错,如下图：
原因：components : { [CheckBox.name]: CheckBox } 引入组件方式不支持
发布到测试环境
以字节跳动为例子，打开字节跳动开发者工具，在工具栏找到上传，填写版本号，发布。版本号不和上一次冲突就可以。
Tips: 前面有提过，新建代码片段是在开发者工具上是没有上传按钮的，要导入项目才可以。
上传成功后，会提示进入小程序开发者平台，现在可以看到开发者的版本。
上图二维码就可以只作为本次的体检版本来扫一扫了。
发布到正式环境
- 前置准备，在后台配置好相关线上域名
- 切换到线上环境
// 环境相关配置 export const ENV = { // 开发环境 RD: 'rd', // 测试环境 TEST: 'test', // 沙箱环境 BOX: 'box', // 线上环境 ONLINE: 'online' } // 环境切换 export function getCurrentEnv() { return ENV.ONLINE // 正式环境切到online }
- 在开发者工具中点击上传
- 去小程序开发者平台提审发布
- 发布成功后可在头条搜索栏中搜到，抖音的话目前只有安卓平台上线了小程序功能。
结束语
以上就是uni-app转字节跳动、百度小程序的部分开发，相信大家对uni-app实战小程序已经有了初步认识，也欢迎大家指正，互相交流，共同进步
