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'});


登录开发


  • 头条授权登录效果



  • 百度授权登录效果



  • 大致思路:


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实战小程序已经有了初步认识,也欢迎大家指正,互相交流,共同进步


目录
打赏
0
0
0
0
1
分享
相关文章
婚恋交友相亲公众号app小程序系统源码「脱单神器」婚恋平台全套代码 - 支持快速二次开发
这是一套基于SpringBoot + Vue3开发的婚恋交友系统,支持微信公众号、Uniapp小程序和APP端。系统包含实名认证、智能匹配、视频相亲、会员体系等功能,适用于婚恋社交平台和相亲交友应用。后端采用SpringBoot 3.x与MyBatis-Plus,前端使用Vue3与Uniapp,支持快速部署和二次开发。适合技术团队或有经验的个人创业者使用。
95 8
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
144 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
437 12
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
245 3
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
994 12
|
6月前
|
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
198 0
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
318 4
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
197 0
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问