0.2.9 • Published 6 months ago
mobileportal v0.2.9
mobileportal
一.引用
npm i mobileportal二.配置
1、拷贝node_modules中mobileportal的文件到项目uni_modules/bsoft-mobilePortal，在build/gen-uni-config.js文件copyMobilePortalFile()函数。
注:版本升级请删除历史目录src/uni_modules/bsoft-mobilePortal
function copyMobilePortalFile() {
let fileNames = ['assets', 'utils', 'vendor', 'pages'];
fileNames.forEach(name => {
let sourcePath = path.resolve(rootPath, 'node_modules/mobileportal', name);
let destPath = path.resolve(rootPath, 'src/uni_modules/bsoft-mobilePortal', name);
if (pathExist(destPath)) {
return;
}
if (pathExist(sourcePath)) {
fs.copySync(sourcePath, destPath);
} else {
console.error('请安装mobileportal依赖');
}
});
}
function genRoute(obj) {
copyMobilePortalFile(); //拷贝node_modules中mobileportal的文件到项目
...
}
2、pages.json配置
pages.json中引入要使用的uni_modules/bsoft-mobilePortal正确的界面路径
{
"easycom":
{
"^u-(.*)": "@/uni_modules/bsoft-mobilePortal/vendor/uview-ui/components/u-$1/u-$1.vue"
},
"condition":
{
"current": 0,
"list":
[
]
},
"pages":
[
{
"path": "uni_modules/bsoft-mobilePortal/pages/home/home",
"meta": {
"auth": true
},
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"app-plus": {
"pullToRefresh":
{
"support": true,
"color": "#fa436a",
"style": "default"
},
"bounce": "none"
}
}
},
{
"path": "uni_modules/bsoft-mobilePortal/pages/message/message",
"meta": {
"auth": true
},
"style": {
"navigationBarTitleText": "消息",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"app-plus": {
"pullToRefresh":
{
"support": true,
"color": "#fa436a",
"style": "default"
},
"bounce": "none"
}
}
},
{
"path": "uni_modules/bsoft-mobilePortal/pages/user/user",
"meta": {
"auth": true
},
"style": {
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "uni_modules/bsoft-mobilePortal/pages/login/login",
"meta": {
"auth": false
},
"style": {
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],
"subPackages":
[
{
"root": "uni_modules/bsoft-mobilePortal/pages/my",
"pages": [
{
"path": "about",
"meta": {
"auth": false
},
"style": {
"navigationBarTitleText": "关于我们"
}
},
{
"path": "forgetPwd",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "找回登录密码"
}
},
{
"path": "modifyPwd",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "找回登录密码"
}
},
{
"path": "resetPwd",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "找回登录密码"
}
},
{
"path": "userInfo",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "个人信息"
}
},
{
"path": "textArea",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "个人信息"
}
},
{
"path": "safeCenter",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "安全中心"
}
},
{
"path": "myWeb",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "服务协议"
}
},
{
"path": "set",
"meta": {
"auth": false
},
"style":
{
"navigationBarTitleText": "设置"
}
}
]
}
],
"tabBar":
{
"color": "#7a7e83",
"selectedColor": "#0faeff",
"backgroundColor": "#ffffff",
"list":
[
{
"pagePath": "uni_modules/bsoft-mobilePortal/pages/home/home",
"text": "首页",
"iconPath": "/static/img/ic_menu_home@2x.png",
"selectedIconPath": "/static/img/ic_menu_home_sel@2x.png"
},
{
"pagePath": "uni_modules/bsoft-mobilePortal/pages/message/message",
"text": "消息",
"iconPath": "/static/img/ic_menu_message@2x.png",
"selectedIconPath": "/static/img/ic_menu_message_sel@2x.png"
},
{
"pagePath": "uni_modules/bsoft-mobilePortal/pages/user/user",
"text": "我的",
"iconPath": "/static/img/ic_menu_mine@2x.png",
"selectedIconPath": "/static/img/ic_menu_mine_sel@2x.png"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF",
"sitemapLocation": "sitemap.json",
"app-plus": {
"titleNView": false
}
}
}
3.接口请求url配置
(1)以下时webpack配置说明示例：
config_proj_main.js文件中serviceUrl配置接口请求地址
serviceUrl: {
develop: "http://10.10.2.124:8080/bbp-server", //本地联调环境
build_develop: "http://uop.bsoft.com.cn/gw", //测试环境
build_publish: "https://app.nure.bshcn.com.cn", //发布环境
},
//图片地址前缀
imgPreviewUrl: {
develop: "http://10.10.2.124:8080/bbp-server",
build_develop: "http://uop.bsoft.com.cn/upload/image",
build_publish: "https://app.nure.bshcn.com.cn/upload/image",
},
(2)项目utils/config.js配置说明
let cfg= JSON.parse(project_cfg);
let base = cfg.serviceUrl; //生成产品用 开发或者提交都用这个地址
let config = {}
config=cfg;
config.baseUrl = base;
config.commonUrl = `${base}/*.jsonRequest`; //通用的请求地址
config.imgPreviewUrl = cfg.imgPreviewUrl+"/";
config.wxTitle= cfg.title;
config.isSceneTenant=false;
export default config;
(3)框架中的utils/api.js中引用了项目的utils/config.js，并且全局接口请求配置的请求域名是baseUrl，故需要上面两步设置
4.菜单功能配置
(1)登录bbp管理后台->权限管理->功能配置中配置首页菜单功能和我的页面菜单功能，其中"首页"编码配置成bsmp-index,"我的"编码配置成bsmp-mine，具体的功能配置见下图3（需配置跳转的路由地址和功能菜单图标）
首页菜单图标建议上传64x64，我的->常用工具菜单图标建议上传44x44
(2)首页菜单显示如下
(3)我的菜单显示如下
三.初始化
入口App.vue中引入import BSMP from "@/uni_modules/bsoft-mobilePortal/utils/BSMP"
onLaunch(){
//初始化，主要用于h5与宿主通信
租户编码配置、应用名称、用户协议、隐私政策
let cfg = {
tenantId: '', //租户编码(必填)
appName: '', //应用名称(必填)
privacyUrl: '', //隐私政策url(必填)
userAgreementUrl: '' //用户协议url(必填)
}
BSMP.init(cfg);
//需项目处理的界面跳转（处理系统消息跳转）
uni.$on('page',res=>{
//type类型 message消息
//data数据 消息中心界面跳转需要的数据
let {type='',data=''} = res;
if(type == 'message'){
}
})
//H5项目中的嵌入的H5事件交互（登录、支付除外）
uni.$on('mp_action',res=>{
console.log(res,"action res===>>>>>>>");
let {action,callbackFunc,evt} = res;
//示例
if(action == 'getAppInfo'){
let data = {
version: "v1.0.0",
appName: "慧康医生"
}
let result = {
code: 200, //200成功 500失败
data
}
BSMP.postMessage(action,result,callbackFunc,evt);
}
});
uni.$on('mp_bridgeAction',res=>{
console.log(res,"mp_bridgeAction res===>>>>>>>");
let {action,reqData} = res;
if(action == 'getAppInfo'){
let data = {
version: "v1.0.0",
appName: "慧康医生"
}
let result = {
code: 200,
data
}
BSMP.mpPostMessage(reqData,result);
}
});
}四.使用
import BSMP from "@/uni_modules/bsoft-mobilePortal/utils/BSMP"
BSMP提供了定位、支付、APP分享、判断是否已登录、登录用户ID，登录用户信息方法
1、定位功能，
(1)manifest.json开启定位功能配置
H5增加如下配置（腾讯地图为例，其它地图配置详见uniapp文档）
"h5":
{
"sdkConfigs":
{
"maps":
{
"qqmap":
{
"key": "xxxx-xxxx"
}
}
},
"permission":
{
"scope.userLocation":
{
"desc": "使用地理位置信息的描述"
}
},
}
微信小程序增加配置
"mp-weixin":
{
"permission":
{
"scope.userLocation":
{
"desc": "使用地理位置信息的描述"
}
},
"requiredPrivateInfos":
[
"getLocation"
]
},
(2)使用定位
BSMP.location('gcj02',false).then(({err,res})=>{
if(!err){
// 定位成功,res对象如下
// latitude 纬度，浮点数，范围为-90~90，负数表示南纬
// longitude 经度，浮点数，范围为-180~180，负数表示西经
// speed 速度，浮点数，单位m/s
// accuracy 位置的精确度
// altitude 高度，单位 m
// verticalAccuracy 垂直精度，单位 m（Android 无法获取，返回 0）
// horizontalAccuracy 水平精度，单位 m
// address 地址信息（仅App端支持，需配置geocode为true）
}else{
//定位失败
}
})
2、支付
(1)在App端要申请微信的App支付，而小程序端申请微信的小程序支付。
(2)iOS和Android原生支付需要在项目中配置相关包名和appId
(3)manifest.json开启支付配置
(4)出入参说明
* @params provider 服务提供商(wxpay微信支付 alipay支付宝 mpPay微信小程序 appleiap苹果支付)
* @params orderInfo 订单数据(支付宝支付orderInfo 为 String 类型 微信支付 orderInfo 为 Object 类型)
* @params jumpUrl (微信H5支付为String类型,跳转支付url 嵌入到微信小程序的h5，支付需要跳转的微信小程序的路径，由小程序根据参数处理支付请求)
* @params callback 回调结果(result: success支付成功 fail支付失败 complete支付完成，不知道支付结果，需要自己查询)
(5)使用
例：支付宝支付
let orderPay = "alipay_sdk=alipay-sdk-java-3.3.49.ALL&app_id=2021002199655419&biz_content=%7B%22body%22%3A%22%E4%BD%8F%E9%99%A2%E9%99%AA%E6%8A%A4-%E6%85%A7%E5%BA%B7%E4%BA%92%E8%81%94%E6%8A%A4%E7%90%86%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%22%2C%22goods_type%22%3A%221%22%2C%22out_trade_no%22%3A%22nure_721029251477798912%22%2C%22subject%22%3A%22%E4%BD%8F%E9%99%A2%E9%99%AA%E6%8A%A4-%E6%85%A7%E5%BA%B7%E4%BA%92%E8%81%94%E6%8A%A4%E7%90%86%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%7D&charset=utf-8&format=json&method=alipay.trade.app.pay¬ify_url=https%3A%2F%2Fnpay-nure.bshcn.com.cn%2Falipay%2Fnotify&sign=P3BkJLWZxCf7i9oMZSK7BbRask3SWcasTOH%2FIoYJuH91wC38wXz2QqRjoR%2B%2F2vOEIG1YM8WlmWLpIvVE493yVNb4O6z27T4VWRYhCehbI7JO0MgRrgNPH3vznMCPRjxkdaUFoBYJRraTi9CfkWq5NXAZIj7FLZnRkQVFFTY8tyBt1H%2F6w%2F2DG2jqWrgKSju%2FzjsnKj1wvrng2%2Br4NiBlYrkSqwt4PnQDFA5x4xhYE6P0F%2FoKsfDRo0Qyqr5ZD4VD534BFCGxx%2BwYAckWbLyUhA0Orzt8E3HII1z5RLLfJhT7o0O1VNkQF8olWqYeZHnnU3M513dH6hmp8LdABEr%2Fxw%3D%3D&sign_type=RSA2×tamp=2023-08-10+14%3A05%3A47&version=1.0"
BSMP.requestPayment('alipay', orderPay, null, (res => {
}));
(6)说明：H5支付支付结果不会通知到，目前做法的是弹窗让用户确认，然后由宿主自己查询支付结果
3、APP分享（微信小程序分享详见uniapp文档）
(1)manifest.json分享相关配置
(2)使用
入参参考https://uniapp.dcloud.net.cn/api/plugins/share.html
let shareObj = {
provider: 'weixin',
scene: 'WXSceneSession',
type: 1,
summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
};
BSMP.appShare(shareObj,
function(res) {
//分享成功
},
function(err) {
//分享失败
})
4、判断是否已登录
(1)使用
let hasLogin = BSMP.hasLogin(); //true已登录 false未登录
5、登录用户ID
(1)使用
let userId = BSMP.getUserId();
6、登录用户信息方法
(1)使用
let userInfo = BSMP.getUserInfo();
7、获取当前登录用户token
let token = BSMP.getToken();
8、获取首页菜单
let menu = BSMP.getHomeMenu();
9、获取我的菜单
let menu = BSMP.getMineMenu();
10、获取person信息
BSMP.getPersonInfo().then(({err,res})=>{
console.log(res.personId,"personId===>>>>");
}).catch((err) => {
console.log(err.msg,"err msg===>>>");
});五.宿主App与uni小程序通讯
1.宿主App向uni小程序发送事件
[self.uniMPInstance sendUniMPEvent:@event data:@data];
uni小程序项目在入口App.vue中接受事件，由项目处理或者交给BSMP处理
uni.onNativeEventReceive((event,data)=>{
console.log('接收到宿主App消息：' + event + data);
//BSMP处理
BSMP.dealNativeEvent(event,data);
})
BSMP支持以下事件:
(1)跳转到小程序界面
event: 'mp_page'
data: {
path: '/xx/xx/xx', //uni小程序路由界面
extData: {} //传给小程序的数据
}
(2)打开支付
event: 'mp_pay'
data: {
provider: '', //服务提供商(wxpay微信支付 alipay支付宝 mpPay微信小程序 appleiap苹果支付)
orderInfo: {} //订单数据(支付宝支付orderInfo 为 String 类型 微信支付 orderInfo 为 Object 类型)
jumpUrl: '' (微信H5支付为String类型,跳转支付url 嵌入到微信小程序的h5，支付需要跳转的微信小程序的路径，由小程序根据参数处理支付请求)
}
(3)调用分享
event: 'mp_share'
data: {
provider: 'weixin',
scene: 'WXSceneSession',
type: 1,
summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
}
(4)登录（废弃）
event: 'mp_userInfo'
data: userInfo //需包含用户token
(5)用户退出登录（废弃）
event: 'mp_loginout'
2.宿主App拓展原生能力（扩展原生能力指的是将App原生开发的功能通过一定规范暴露给 uni小程序环境，然后即可在 uni小程序应用中调用您的原生功能）
let BSMPModule = uni.requireNativePlugin('BSMPUniModule');
(1)登录（带有token）
let that = this;
BSMPModule.loginInfo({},(ret) => {
//异步调用
console.log('BSMPModule login result====>>>>');
console.log(JSON.stringify(ret));
that.saveMPUserInfo(ret);
})
(2)菜单
//同步调用
let menuData = BSMPModule.userMenus({});
(3)退出登录
BSMPModule.logout({},(ret) => {
})
3.uni小程序向宿主发送事件
uni.sendNativeEvent(event, data
, ret => {
console.log('宿主App回传的数据：' + ret);
})
(1)支付结果回调
event: 'mp_payResult',
res:{result: 'success'}
//res回调结果(result: success支付成功 fail支付失败 complete支付完成，不知道支付结果，需要自己查询)
uni.sendNativeEvent('mp_payResult', res
, ret => {
console.log('宿主App回传的数据：' + ret);
})
(2)分享结果回调
event: 'mp_shareResult',
res：{result: 'success'}
//res回调结果(result: success支付成功 fail支付失败)
uni.sendNativeEvent('mp_payResult', res
, ret => {
console.log('宿主App回传的数据：' + ret);
})
(3)关闭小程序
//原生App打开uni小程序某个界面时，路径后参数传from=native,则点击返回时会调用该事件关闭小程序，详见utils/main-mixin.js中的onBackPress(){}
uni.sendNativeEvent("closeMP", {}, ret => {
console.log('宿主App回传的数据：' + ret);
})六.门户H5与嵌入H5交互
1.说明:通过postMessage实现跨域通信和界面间数据通信
2.项目中使用uni_modules/bsoft-mobilePortal/pages/web/mainWeb打开嵌入的H5网页
3.mainWeb.vue目前仅支持登录和支付事件交互
由嵌入的H5通过postMessage发送消息，门户H5监听做出处理
嵌入H5网页发送消息,参考utils/bshc-open.js的sendEvent方法，
window.postMessage({
data: {
action: event,
callback: 'bshc.bsEventCallback',
data: params,
},
});
(1)登录
参数：event='login'
callback回调
data: 通讯参数
(2)支付（H5环境仅支持H5支付）
参数：event='nativePay'
callback回调
data: data
orderPay支付宝是string类型：
let orderPay = "alipay_sdk=alipay-sdk-java-3.3.49.ALL&app_id=xx&biz_content=xx=utf-8&format=json&method=alipay.trade.app.pay¬ify_url=xx&sign_type=RSA2×tamp=2023-08-10+14%3A05%3A47&version=1.0"
orderPay微信支付对象：
let orderPay = {
appid: 'xx',
noncestr: 'xx',
package: 'Sign=WXPay',
partnerid: '1609677038',
prepayid: 'xx',
timestamp: 'xx',
signType: 'xx',
sign: 'xx',
};
data:{
channel://支付渠道 1支付宝 2微信
tradeInfo: orderPay, //
jumpUrl: '' // 微信H5支付必填
}
4.结果回传（mainWeb.vue函数doCallback处理结果回传）
let backData = {
isEventCallback: true,
action: event,
callback: callbackFunc,
data: result,
};
event: 同嵌入h5传过来的一样，
result: 回调结果，登录返回用户信息,例：result = {
code: 200,
msg: '登录成功',
data: 用户信息对象
}，
支付返回支付结果，例result = {code: 200,msg: '支付成功'}
evt.source.postMessage(backData, evt.origin);七.门户小程序与嵌入H5交互
1.说明： 由于小程序没有api去实现小程序->webview的通讯，只能通过改变页面的hash传递消息，改变hash并不会导致webview刷新,跳转至小程序过渡页面处理相关通讯
2.项目中使用uni_modules/bsoft-mobilePortal/pages/web/mainWeb打开嵌入的H5网页
3.嵌入的H5网页需自己判断当前环境是小程序，发送事件是打开门户界面/uni_modules/bsoft-mobilePortal/pages/web/bridge，参考utils/bshc-open.js有判断当前环境及小程序的sendEvent方法
4.jumpToMiniProgramPage跳转到门户小程序bridage界面时也会传入action和data参数，请求参数同上3(注：支付只支持微信小程序)
5.结果回调bridage界面修改H5的hash值，嵌入h5监听hashchange,处理返回结果（参考utils/bshc-open.js jumpToMiniProgramPage方法内），返回参数结果同上4