uniapp条件编译和网页端打包


一、uniapp条件编译

网页端不支持微信平台授权登录等功能,可通过条件编译,让代码编译到不同平台。
1.条件编译语法
通过特殊注释
以#ifdef 或 ifndef 加平台名称开发, 以#endif结尾
全局搜索:
1.wx. 开头的文件,添加特殊注释
2.Button open-type 属性,添加特殊注释

// #ifdef MP-WEIXIN
// 获取 code 登录凭证
//当前代码只会在微信小程序中执行
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

// 获取用户手机号码
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
  const { encryptedData, iv } = ev.detail
  const res = await postLoginWxMinAPI({ code, encryptedData, iv })
  loginSuccess(res.result)
}
// #endif
// #ifdef H5
const form = ref({
  account: '13000000000',
  password: '', //
})

// 表单提交
const onSubmit = async () => {
  const res = await postLoginAPI(form.value)
  loginSuccess(res.result)
}
// #endif
 <!-- 网页端表单登录 -->
      <!-- #ifdef H5 -->
      <input v-model="form.account" class="input" type="text" placeholder="请输入用户名/手机号码" />
      <input v-model="form.password" class="input" type="text" password placeholder="请输入密码" />
      <button @tap="onSubmit" class="button phone">登录</button>
      <!-- #endif -->

      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN -->
      <button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
        <text class="icon icon-phone"></text>
        手机号快捷登录
      </button>
      <!-- #endif -->

二、网页端打包

npm run build:h5

出现白屏原因:可能是路径问题
配置manifest.json

 /* 网页端特有配置 */
    "h5" : {
        "router" : {
            // 路由基础路径。默认为 /
            "base" : "./"
        }
    },
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款前开发框架,它支持本地打包和云打包两种方式。 本地打包: 本地打包是指将uniapp项目编译成原生应用程序,以在本地运行。本地打包适用于开发人员在开发过程中使用,以便测试和调试。本地打包主要需要使用uni-app官方提供的命令行工具uni-app-cli来完成,具体步骤为: 1. 在终中进入uniapp项目目录,使用“npm run dev:mp-weixin”命令将uniapp编译为微信小程序。 2. 在微信开发者工具中导入编译后的小程序项目。 3. 根据需要进行测试和调试。 4. 如果需要打包其他平台,可以在终中使用相应的命令来编译项目,比如“npm run dev:app-plus”命令用于编译为APP原生应用程序。 云打包: 云打包是指将uniapp项目编译成原生应用程序,并上传到uni-app官方提供的云打包服务,由云打包服务自动签名并打包成对应平台的应用程序。云打包适用于需要发布给用户使用的应用程序,可以极大地简化应用程序打包的流程。云打包的具体步骤为: 1. 进入uni-app官网,登录自己的账号,进入“云打包”页面。 2. 选择需要打包的平台,上传编译后的小程序或原生应用程序。 3. 根据需要设置应用程序的名称、版本号、图标等相关信息。 4. 点击“打包”按钮,等待云打包服务自动签名并打包出应用程序。 5. 下载生成的应用程序并进行测试。 本地打包和云打包在使用上存在一些不同,根据实际需要选择合适的方式进行应用程序的打包。总的来说,uniapp的本地打包和云打包能够为开发者和用户提供便捷的应用程序制作方式,同时也简化了一些繁琐的操作过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值