mobileportal
Advanced tools
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===>>>");
});
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);
})
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);
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
FAQs
The npm package mobileportal receives a total of 4 weekly downloads. As such, mobileportal popularity was classified as not popular.
We found that mobileportal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.