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" : "./"
        }
    },