开发者社区> 游客njxd47hac6d2e> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

uni-app转字节跳动、百度小程序手摸手实战(下)

简介: 从最早发布的微信小程序,到后来的支付宝小程序、钉钉小程序,字节跳动小程序、百度小程序、QQ小程序等,面对这么多套的代码,开发者去编写多套原生代码的成本显然非常高,使用H5的话体验又没有原生好,这时候只需编写一套代码,就能够适配多端的能力就显得尤为需要。 下面进入正题,给大家介绍下uni-app字节小程序的开发
+关注继续查看

个人中心开发遇到的问题


  • 向网页传递信息要使用头条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'});


登录开发


  • 头条授权登录效果


image


  • 百度授权登录效果


image


  • 大致思路:


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报错,如下图:


image


原因:components : { [CheckBox.name]: CheckBox } 引入组件方式不支持


发布到测试环境


以字节跳动为例子,打开字节跳动开发者工具,在工具栏找到上传,填写版本号,发布。版本号不和上一次冲突就可以。


Tips: 前面有提过,新建代码片段是在开发者工具上是没有上传按钮的,要导入项目才可以。


image


上传成功后,会提示进入小程序开发者平台,现在可以看到开发者的版本。


image


image


上图二维码就可以只作为本次的体检版本来扫一扫了。


发布到正式环境


  • 前置准备,在后台配置好相关线上域名


image


  • 切换到线上环境


// 环境相关配置
export const ENV = {
  // 开发环境
  RD: 'rd',
  // 测试环境
  TEST: 'test',
  // 沙箱环境
  BOX: 'box',
  // 线上环境
  ONLINE: 'online'
}
// 环境切换
export function getCurrentEnv() {
  return ENV.ONLINE // 正式环境切到online
}


  • 在开发者工具中点击上传


  • 去小程序开发者平台提审发布


  • 发布成功后可在头条搜索栏中搜到,抖音的话目前只有安卓平台上线了小程序功能。


结束语


以上就是uni-app转字节跳动、百度小程序的部分开发,相信大家对uni-app实战小程序已经有了初步认识,也欢迎大家指正,互相交流,共同进步


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件(中)-- 搜索建议
62 0
【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建
【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建
55 0
uni-app:小程序发布检查步骤及注意事项
本篇最好放到项目的【README.md】文件中,方便每次发布的时候检查纠错,毕竟好记性不如烂笔头。而且其他开发者帮忙修改bug、发布新版本的时候,只需要根据这个事项就能实现整个流程的提审发布,提高效率。
96 0
Uni-App - 接口 - 第三方登录(小程序)(Hcoder 版)
Uni-App - 接口 - 第三方登录(小程序)(Hcoder 版)
141 0
前端摸鱼神器,设计稿一键导出 「小程序/Vue/Uni-app」代码
这款神器就是「CodeFun」,它号称“UI 设计稿智能生成源代码,10 分钟完成 8 小时工作量”,让我们做前端,不搬砖
368 0
uni-app开发微信小程序踩坑指南
uni-app开发微信小程序踩坑指南
161 0
H5跳转App、跳转小程序
H5跳转App、跳转小程序
1046 0
uni-app的scroll-view上拉加载数据请求防抖
解决scroll-view上拉到底部时触发多次数据请求的问题
561 0
uni-app总体介绍
uni-app 是一个使用 [Vue.js](https://vuejs.org/) 开发**跨平台**应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
2596 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
阿里小程序繁星计划-高德小程序
立即下载
支付宝小程序教程
立即下载
Redis开发实操之春运迁徙页面
立即下载