逆战之微信小程序全局配置

微信小程序之全局配置-1

小程序的配置分为全局配置、页面配置及sitemap 配置

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

属性类型必填描述最低版本
pagesstring[]页面路径列表
windowObject全局的默认窗口表现
tabBarObject底部 tab 栏的表现
networkTimeoutObject网络超时时间
debugboolean是否开启 debug 模式,默认关闭
functionalPagesboolean是否启用插件功能页,默认关闭2.1.0
subpackagesObject[]分包结构配置1.7.3
workersstringWorker 代码放置的目录1.9.90
requiredBackgroundModesstring[]需要在后台使用的能力,如「音乐播放」
pluginsObject使用到的插件1.9.6
preloadRuleObject分包预下载规则2.3.0
resizablebooleaniPad 小程序是否支持屏幕旋转,默认关闭2.3.0
navigateToMiniProgramAppIdListstring[]需要跳转的小程序列表,详见 wx.navigateToMiniProgram2.4.0
usingComponentsObject全局自定义组件配置开发者工具 1.02.1810190
permissionObject小程序接口权限相关设置微信客户端 7.0.0
sitemapLocationstring指明 sitemap.json 的位置
stylestring指定使用升级后的weui样式2.8.0
useExtendedLibObject指定需要引用的扩展库2.2.1
entranceDeclareObject微信消息用小程序打开微信客户端7.0.9

1.1 pages

⽤于指定⼩程序由哪些⻚⾯组成,每⼀项都对应⼀个⻚⾯的 路径(含⽂件名) 信
息。⽂件名不需要写⽂件后缀,框架会⾃动去寻找对于位置的 .json, .js, .wxml,
.wxss 四个⽂件进⾏处理
pages配置
有多少个⻚⾯,此处就应该有多少个选项
数组的第⼀项代表⼩程序的初始⻚⾯(⾸⻚)。⼩程序中新增/减少⻚⾯,都需
要对 pages 数组进⾏修改。

1.2 window

⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景⾊。

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。
微信客户端 6.6.0
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为 px。
详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化
2.4.0 (auto) / 2.5.0 (landscape)

1.3 tabBar

如果⼩程序是⼀个多 tab 应⽤(客户端窗⼝的底部或顶部有 tab 栏可以切换⻚
⾯),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应⻚
⾯。

属性类型必填默认值描述最低版本
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positionstringbottomtabBar 的位置,仅支持 bottom / top
custombooleanfalse自定义 tabBar,见详情2.5.0
其中 list 接受⼀个数组,只能配置最少 2 个、最多 5 个 tab。 tab 按数组的顺序排 序,每个项都是⼀个对象,其属性值如下:
属性类型必填说明
pagePathstring页面路径,必须在 pages 中先定义
textstringtab 上按钮文字
iconPathstring图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
positiontop 时,不显示 icon。
selectedIconPathstring选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
positiontop 时,不显示 icon。

1.4 networkTimeout

各类⽹络请求的超时时间,单位均为毫秒。

属性类型必填默认值说明
requestnumber60000wx.request 的超时时间,单位:毫秒。
connectSocketnumber60000wx.connectSocket 的超时时间,单位:毫秒。
uploadFilenumber60000wx.uploadFile 的超时时间,单位:毫秒。
downloadFilenumber60000wx.downloadFile 的超时时间,单位:毫秒。

1.5 debug

可以在开发者⼯具中开启 debug 模式,在开发者⼯具的控制台⾯板,调试信息以
info 的形式给出,其信息有 Page 的注册,⻚⾯路由,数据更新,事件触发等。可
以帮助开发者快速定位⼀些常⻅的问题

1.6 functionalPages

插件所有者⼩程序需要设置这⼀项来启⽤插件功能⻚

1.7 permission

⼩程序接⼝权限相关设置。字段类型为 Object,结构为:

属性类型必填默认值描述
scope.userLocationPermissionObject位置相关权限声明
PermissionObject 结构为
属性类型必填默认值说明
descstring小程序获取权限时展示的接口用途说明。最长 30 个字符

因为疫情原因,不管是工作还是学习都受到了严重影响。在疫情期间,在家也不能放松,这个微信小程序全局配置,希望能对大家有所帮助

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是基于uniapp的H5视频播放器跳转到微信小程序的代码: 1. 在需要跳转小程序的页面中添加一个按钮,点击按钮可以跳转到小程序: ``` <template> <div> <video ref="videoPlayer" src="https://xxx.com/xxx.mp4"></video> <button @click="navigateToMiniProgram">跳转到小程序</button> </div> </template> <script> import uni from '@/utils/uni.js' // 导入uni对象 export default { methods: { navigateToMiniProgram() { uni.navigateToMiniProgram({ appId: '小程序的appid', path: '要跳转的小程序页面路径', success(res) { console.log('跳转成功', res); }, fail(err) { console.log('跳转失败', err); } }); } }, mounted() { // 获取video标签 const video = this.$refs.videoPlayer; // 监听播放事件 video.addEventListener('play', () => { console.log('开始播放'); }); // 监听暂停事件 video.addEventListener('pause', () => { console.log('暂停播放'); }); } } </script> ``` 2. 在微信小程序中创建一个与H5页面对应的页面,并在该页面中添加一个视频播放器,播放器的视频来源与H5页面一致。示例代码如下: ``` <video src="https://xxx.com/xxx.mp4"></video> ``` 3. 在微信小程序中添加一个按钮,点击按钮可以返回H5页面。示例代码如下: ``` <button @tap="navigateBack">返回H5页面</button> ``` 4. 在微信小程序中添加跳转到H5页面的方法,示例代码如下: ``` navigateBack() { wx.navigateTo({ url: '/pages/h5/index' }); } ``` 注意: - 在 H5 页面中无法直接调起微信小程序,需要用户手动点击触发跳转。 - 在微信小程序中,需要使用 `wx.navigateTo` 跳转到H5页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值