微信小程序全局配置详解

这篇具有很好参考价值的文章主要介绍了微信小程序全局配置详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过全局配置实现的效果

微信小程序全局配置详解,前端,微信小程序,小程序

开发者

微信公众平台

登录网址

https://mp.weixin.qq.com/

注册网址

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

微信小程序开发者工具

下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

小程序目录结构

描述整体的app

app.js 小程序逻辑

app.json 小程序公共配置

app.wxss 小程序公共样式表

描述各自页面的page

为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名

js 页面逻辑

wxml 页面结构

json 页面配置

wxss 页面样式表

全局配置

Pages

简介

Pages用于指定小程序由哪些页面组成

配置项

pages:配置小程序的页面

文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理

entryPagePath:指定小程序的首页

未指定 entryPagePath 时,数组的第一项代表小程序的首页

如:"entryPagePath": "pages/index/index",

配置【app.json】

"entryPagePath": "pages/index/index",
"pages": [
    "pages/index/index",
    "pages/logs/logs"
],

window

简介

_window 用于设置小程序的状态栏、导航条、标题、窗口背景色等等

配置项

navigationBarBackgroundColor:  导航栏背景颜色【默认  # 000000】
navigationBarTextStyle:        导航栏标题颜色【默认white,仅支持black / white】
navigationBarTitleText:        导航栏标题文字内容
backgroundColor:               窗口的背景色【  # ffffff】
backgroundTextStyle:           下拉loading的样式【默认dark,仅支持dark / light】
enablePullDownRefresh:         是否开启全局的下拉刷新【默认false】
onReachBottomDistance:         页面上拉触底事件触发时距页面底部距离【默认50,单位px】

配置【app.json】

"window": {
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "第一个小程序",
    "backgroundColor": "#000000",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50
},

tabBar

简介

客户端窗口的底部或顶部有 tab 栏可以切换页面

配置项

position:tab的位置【默认bottom,仅支持bottom / top】
color :tab上的文字默认颜色
selectedColor:tab上的文字选中时的颜色
backgroundColor:tab的背景色
borderStyle:tab上边框的颜色【默认blak,仅支持black / white】

list:tab的列表【最少2个,最多5个】属性:
pagePath:页面路径【必须在pages有】
text:按钮文字
iconPath【可选】:图片路径【最大40kb,建议尺寸81px * 81px,不支持网络图片,当position为top时不显示】
selectedIconPath【可选】:选中时的图片路径

配置【app.json】

"tabBar": {
    "color": "#999999",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./images/home.png",
        "selectedIconPath": "./images/home_select.png"
    },
        {
            "pagePath": "pages/news/news",
            "text": "新闻",
            "iconPath": "./images/news.png",
            "selectedIconPath": "./images/news_select.png"
        }]
},

其余配置

配置项

style:app.json 中配置 "style": "v2"可表明启用新版的组件样式
sitemapLocation:指明 sitemap.json的位置

debug:是否开启debug模式【默认false】
debugOptions:小程序调试相关配置项
配置项:
enableFPSPanel:是否开启 FPS 面板【默认false】
FPS 面板:为了便于开发者调试渲染层的交互性能,小程序基础库提供了选项开启 FPS 面板,开发者可以实时查看渲染层帧率

networkTimeout:各类网络请求的超时时间,单位均为毫秒
配置项:
request:wx.request的超时时间【默认60000】
connectSocket:wx.connectSocket的超时时间【默认60000】
uploadFile:wx.uploadFile的超时时间【默认60000】
downloadFile:wx.downloadFile的超时时间【默认60000】

permission:小程序接口权限相关设置

配置【app.json】

"style": "v2",
"sitemapLocation": "sitemap.json",
"debug": true,
"debugOptions": {
    "enableFPSPanel": true
},
"networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
},
"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
}

公共样式

简介

在项目根目录的 app.wxss 文件为小程序公的共样式表,相当与CSS初始化文件配置
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
WXSS 用来决定 WXML 的组件应该怎么显示
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改
与 CSS 相比,WXSS 扩展的特性有:尺寸单位/样式导入

尺寸单位

rpx: 可以根据屏幕宽度进行自适应【规定屏幕宽为750rpx】
开发微信小程序时设计师可以用 iPhone6作为视觉稿的标准,如在 iPhone6 上,
屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

在app.wxss文件中引入common.wxss文件:@import "./common/common.wxss";

配置【app.wxss】

@import "./common/common.wxss";

.box{
    margin: 50px;
}             

全局生命周期函数

简介

每个小程序都需要在app.js中调用App方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等

生命周期回调函数

onLaunch:监听小程序初始化
onShow:监听小程序启动或切前台
onHide:监听小程序切后台
onError:错误监听函数
onPageNotFound:页面不存在监听函数
onThemeChange:监听系统主题变化

配置【app.js】

App({
onLaunch(options)
{
console.log("监听小程序初始化", options);
},
onShow(options)
{
    console.log("监听小程序启动", options);
},
onHide()
{
    console.log("监听小程序切后台");
},
onError(msg)
{
// 小程序发生脚本错误或
API
调用报错时触发
console.log("错误监听函数", msg)
},
onPageNotFound(res)
{
    console.log("页面不存在监听函数");
},
onThemeChange()
{
    console.log("系统切换主题时触发");
}
})

全局属性

简介

整个小程序只有一个 App 实例,开发者可以通过getApp方法获取到全局唯一的App实例,获取App上的数据或调用开发者注册在App上的函数

配置【app.js】

App({
    globalData: {
        userInfo: "我是全局属性"
    }
})

读取【单页面.js】

Page({
    onLoad(options)
{
    const
appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 我是全局属性
}
})


           文章来源地址https://www.toymoban.com/news/detail-540083.html

到了这里,关于微信小程序全局配置详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 样式和全局配置

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月07日
    浏览(50)
  • 微信小程序(三)页面配置与全局配置

    注释很详细,直接上代码 上一篇 新增内容: 页面导航栏的属性配置 全局页面注册配置 全局导航栏配置 样式版本 源码: (标准的json是不能加注释的,但为了方便理解咱做个违背标准的决定) 页面: index.json 效果演示: 全局: app.json 效果演示: 这里有小伙伴问了,我就只用

    2024年02月02日
    浏览(40)
  • 微信小程序 样式和全局配置 WXSS

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月15日
    浏览(63)
  • 微信小程序全局配置API域名和url

    微信小程序和后台进行交互是通过API请求数据,所以API请求地址的管理 就非常重要,如果在wx.request的时候使用写url地址的方式,那后面要是api地址变化了,就要到每个有请求的地方进行修改url,是大项目的话就会很麻烦,如果配置了全局请求地址修改起来就简单很多。 1.项

    2024年02月12日
    浏览(83)
  • 微信小程序之全局配置-window和tabBar

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月25日
    浏览(77)
  • 【微信小程序入门篇】全局配置 | 页面切换之tabBar配置项

    下面引用开发者文档中的介绍: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 tabBar:翻译为标签栏。 下面展示了两个小程序的 tab 栏,分别是在顶部、底部。 当我

    2024年02月02日
    浏览(49)
  • uniapp 微信小程序配置全局主题色、实现动态修改主题色

            本文的实现目标是全局配置小程序的整体主题色,包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色;第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片

    2024年02月01日
    浏览(44)
  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(43)
  • uni-app 微信小程序全局配置分享好友、朋友圈...

    使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友、朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加:  且onShareAppMessage()与onShareTimeline() 与methods同级!!! 官方网址:uniapp.dcloud.io/api/plugins… 这样做虽然实现了分享功能,

    2024年02月11日
    浏览(73)
  • 微信小程序---配置和属性(全局配置的简单使用,运算符以及一些常用属性)

    一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json 注意:配置文件中不能出现注释 app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 普通快速启动项目 里边的 app.json 配置

    2023年04月27日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包