使用uniapp重构原生微信小程序-使用requireUni()导出baseUrl

上一章我们在uniapp项目部分实现了baseUrl随环境切换，当然还要考虑原生环境如何使用这个特性。

和原生代码打通的思路

原本以为uniapp打包的时候会把base-url.ts编译成一个单独的base-url.js文件，然后原生代码通过共享文件来共享特性。打包起来发现uniapp把所有的非组件的js都打包到了vender.js里面去了。

所以这条路行不通了。只能另寻他法了。

记得我开发微信小程序插件的时候，微信官方提供了一种插件和小程序互相暴露接口的机制，具体参考这里

那我们也做一个requireUni()吧，原生小程序代码通过这个方法获取uniapp项目侧的导出然后使用。

uni-export.ts

在uniapp项目下创建一个uni-exports.ts ，通过这个文件来导出uniapp项目侧的内容。

// uni-exports.ts
import baseUrl from "@/common/baseUrl";

/**
 * @param target 原生小程序端的接收对象
 */

export type UniExport= (target:{[index:string]:any})=>void

export const baseUrlExport : UniExport = (target)=>{
    target.baseUrl = baseUrl
    console.debug('baseUrl 已经导出。')
}

uniapp2wxpack这个插件的文档上提供了这么一个api

wx.__uniapp2wxpack·

用于存放解耦包相关方法和数据的对象，在引入解耦包的`app.js`后，通过获取`wx.__uniapp2wxpack.uniSubpackage.__packInit`，可以拿到uni项目`App.vue`的初始化配置  
其他平台小程序需要替换`wx`对象为其他小程序对象  
**注意：其中uniSubpackage属性代表了解耦包的名称，名称变化，该属性也会相应的改变**

我们可以通过这个接口把上面的导出内容传过去.

在uniapp项目侧的App.vue中声明一下导出模块。

//App.vue

import * as uniExports from "@/uni_exports";

export default Vue.extend({
 mpType: 'app',
 globalData: {
     uniExports
 }
});

在小程序目录下（mainWeixinMp）创建一个require-uni.js:

let uniExports = undefined

module.exports=function requireUni(){
  if (!uniExports){
      uniExports={}
      const origin =wx.__uniapp2wxpack[""].__packInit.globalData.uniExports
      for(const name in origin){
          origin[name].call(null,uniExports)
      }
  }
  return uniExports
}

试一下效果：

看起来还不错。

初始化原生小程序的baseUrl

从原生小程序中得到了uniapp侧导出的baseUrl，我们就可以将这个baseUrl设置到原生小程序的管理url的配置文件里面了。不过需要做一点点改造：

let baseUrlHolder = {
  oldBaseUrl: '',
  newBaseUrl: ''
}

function initBaseUrl(baseUrl) {
  console.log('初始化baseUrl', baseUrl)
  baseUrlHolder = baseUrl
}

module.exports = {
  initBaseUrl,
  dev: {
    get baseUrl() {
      return baseUrlHolder.oldBaseUrl
    }
  },
  dev2: {
    get baseUrl() {
      return baseUrlHolder.newBaseUrl
    }
  }
}

然后在原生小程序的app.js的onLaunch里面调用一下就可以了。

运行结果：

这样小程序打包上线的时候不用去手动修改服务器地址了，只需要打包一次就可以了，体验版使用测试环境，正式版使用正式环境。