代码拉取完成，页面将自动刷新
同步操作将从 编程民工/uniapp移动端开发框架 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
此项目框架是使用uniapp空项目搭建的移动端开发框架，支持微信小程序 + H5+ 公众号 + APP开发，封装了request接口、微信支付、扫码、分包、正则表达式、常用方法、页面跳转和MD5等功能，框架搭建未使用UI库，若需要使用UI库去插件市场自行导入。
软件架构说明
一、框架开发准备：
二、框架使用：
修改common文件夹下sju.ajax的接口基准地址域名，改为自己接口的域名
页面使用自定义导航栏
使用自定义标题栏需要把pages.json的globalStyle的导航栏样式取消默认的原生导航栏
//基础自定义导航栏
<uni-nav-bar :statusBar="true" fixed="true" title="移动开发框架" />
//返回上一页`<br/>
<uni-nav-bar leftIcon="arrowleft" :statusBar="true" fixed="true" title="移动开发框架" />
//修改字体颜色`<br/>
<uni-nav-bar color="#000" :statusBar="true" fixed="true" title="移动开发框架" />
//修改背景颜色`
<uni-nav-bar bgImage="linear-gradient(45deg, #02133f, #6739b6)" :statusBar="true" fixed="true" title="移动开发框架" />
let value=''
///MD5加密
this.sjuBase.toMD5('123')
//判断是否空值,如果是空值,则返回true
this.sjuBase.isNull(value)
//判断是否非空值,如果是非空值,则返回true
this.sjuBase.isNotNull(value)
//检查是否非空,如果非空,返回True,否则返回false,并显示错误提示:
this.sjuBase.checkNotNull(value,'参数不能为空')
//检查非空数组:
let checkNullArr = [{
val: this.telephoneNo,
msg: '手机号必填'
}, {
val: this.loginPassword,
msg: '密码必填'
}];
this.sjuBase.checkArrayNotNull(checkNullArr)
//提示消息(要显示的消息,显示时间)
this.sjuAlert.showInfo('消息内容',2000)
//提示错误消息,需要点击确认后关闭
this.sjuAlert.showError('错误消息','提示框标题')
//提示,确认后进行页面跳转
this.sjuAlert.showAndRedirect('消息内容','页面路由','提示框标题')
//提示确认框
this.sjuAlert.showConfirm('消息内容',()=>{
//点击确认后执行方法`
},()=>{
//点击取消后执行方法
},'提示框标题')
//显示等待框
this.sjuAlert.showLoading()
//隐藏等待框
this.sjuAlert.hideLoading()
//======= 正则封装方法多个校验值使用数组对象传值 =========
// 检查正则数组
let checkRegexArr = [{
val: this.username, //检验值
type: 'username', //校验类型
msg: '用户名不合法' //消息提示内容
},
{
val: this.loginPassword,
type: 'password',
msg: '密码应包含至少8个字符,包含数字和字母！'
},
{
val: this.phoneNumber,
type: 'phoneNumber',
msg: '请输入正确的手机号'
},
{
val: this.idNumber,
type: 'idCard',
msg: '请输入正确的身份证编号'
},
{
val: this.Number,
type: 'money',
msg: '请输入正确的金额'
},
{
val: this.bankNumber,
type: 'bankNumber',
msg: '请输入正确的银行卡号'
},
{
val: this.Email,
type: 'Email',
msg: '请输入正确的邮箱地址'
}
]
this.sjuRegex.checkArray(checkRegexArr)
//======= 正则封装方法单个检验值使用 =========
this.sjuRegex.password(value)
sju.login.js:往下面数组添加不需要登录的页面路径地址
noLogin:['/tab/index']
//页面中检测页面是否需要登录
this.sjuLogin.checkLogin('页面路径')
//微信小程序登录
this.sjuLogin.weixinInfo()
//本地存储
this.sjuLogin.saveValue('key键值','保存的值')
//从本地存储获取key数据
this.sjuLogin.getValue('key键值')
//从本地存储清除某个key
this.sjuLogin.clearKey('key键值')
//从本地存储清除所有数据
this.sjuLogin.clearAll()
//保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
this.sjuNav.navigateTo(url)
//关闭当前页面,跳转到应用内的某个页面
this.sjuNav.redirectTo(url)
//关闭所有页面,跳转到应用内的某个页面
this.sjuNav.reLaunch(url)
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
this.sjuNav.switchTab(url)
//关闭当前页面,返回上一页面或多级页面,
this.sjuNav.navigateBack() //返回上一页
this.sjuNav.navigateBack(delta) //delta:返回的页面数,默认返回上一页
8.网络请求使用
this.sjuRequest(接口名称,请求方式,请求参数,是否展示加载,内容类型)
this.sjuRequest("api接口名称",'get',{
data1:this.data1,
data2:this.data2
}).then(res=>{
console.log(res)
})
//======= H5调用微信支付封装方法 =======
//请求后台的微信支付方法获取支付参数
this.sjuAjax.post('/api/xxx/weixinPay', {
openID: openID,//微信openID
orderCodePay: orderCodePay,//订单编号
userCode: this.jsLogin.getValue('userCode') //用户编号
}, data => {
console.log(data)
//获取成功后，前端调起微信支付
var orderInfo = JSON.parse(data.orderInfo);
this.sjuPay.payWeixinH5(orderInfo, orderCodePay);
}, true);
//======= 微信小程序调用微信支付封装方法 =======
//请求后台的微信支付方法获取支付参数
this.sjuAjax.post('/api/xxx/weixinPay', {
openID: openID,//微信openID
orderCodePay: orderCodePay,//订单编号
userCode: this.jsLogin.getValue('userCode') //用户编号
}, data => {
console.log(data)
//获取成功后，前端调起微信支付
this.sjuPay.payWeiXinApp(orderCodePay);
}, true);
//========== H5调用自定义分享 ===========
//这里使用到了 this.$title 和 this.$desc 的变量，需要在 main.js 里面定义
//因为自定义分享功能是多页面使用，分享标题和分享描述基本上都是固定的，后面改变标题或者描述
//只需把mian.js的变量修改一下即可
onShow() {
//调用微信配置接口
// #ifdef H5
this.sjuWeiXin.weixinJSConfig(this.$title,'linkUrl(分享页面路径(字符串空默认首页))','分享图片路径(网络图片)',this.$desc);
// #endif
}
//========== H5调用扫码功能 ===========
this.sjuWeiXin.scanQRCode()
在项目文件夹下新建static_sub文件夹用于存放分包静态资源文件,静态资源存放文件夹要与分包名称一致。
在pages.json中填写分包配置和分包预加载配置,preloadRule:配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {}
},
{
"path" : "pages/my/my",
"style" : {}
}
],
// 分包配置
"subPackages": [
{
// my分包
"root": "sub_my",
"name": "my",
"pages": [{
// 详情
"path": "pages/list/list",
"style": {}
}]
}
],
// 分包预加载配置
"preloadRule": {
// 进入我的后，预加载我的
"pages/tab/my/my": {
"network": "all",
"packages": ["my"]
}
},
//tabBar页面
"tabBar": {
"list": [{
"pagePath": "pages/tab/index/index",
"iconPath": "/static/tabImage/home.png",
"selectedIconPath": "/static/tabImage/home1.png",
"text": "首页"
},
{
"pagePath": "pages/tab/my/my",
"iconPath": "/static/tabImage/user.png",
"selectedIconPath": "/static/tabImage/user1.png",
"text": "我的"
}
],
"color": "#999999",
"selectedColor": "#593A25",
"borderStyle": "white",
"backgroundColor": "#fff"
},
"globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "移动端框架",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
以下所有说明都是基于阿里图标库
(opens new window)进行扩展，其他图标库同理，明白原理即可方便扩展
添加至项目，如没有项目，需要点击下图第二步的图标添加一个项目目录，如已经有项目则可以略过第二步，选择项目后点击确定：
确定后进入项目，点击项目设置 ，对图标库进行一些设置： 
项目名称和项目描述根据自己需求填写， fontClass 是图标的前缀 ，需要传入组件type属性，fontFamily 是图标集名称，需要传入组件custom-prefix 属性，字体格式可以只勾选 ttf: 
点击保存后 ，可以下载图库库到本地： 
下载解压后，需要用到的文件暂时有两个 iconfont.css、iconfont.ttf: 
将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。
打开 iconfont.css ,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确：
@font-face {
font-family: "iconfont";
src: url('/static/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
}
.icon-search:before {
content: "\e65c";
}
通过上述操作 ，现在就获得一个可以自定义的图标库，
在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面
<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>
使用自定义图标
<i class="iconfont icon-search" />
注意：因为本质上还是使用的字体，所以多色图标还是不支持的。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手