微信小程序框架(一)-全面详解（学习总结---从入门到深化）（下）

2023-01-11 257

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

全局配置_tabBar属性

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

配置 app.json 文件中的 tabBar 的属性

"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"
   }]
},

1. 小程序的 tabbar 配置中，那个属性可以配置 tabbar 显示在顶部还是底部：position

全局配置_常用其他配置

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

style

微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2" 可表明启用新版的组件样式

sitemapLocation

指明 sitemap.json的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

networkTimeout

各类网络请求的超时时间，单位均为毫秒

debug

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

debugOptions

小程序调试相关配置项

FPS 面板

为了便于开发者调试渲染层的交互性能，小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率

开启方式

"debugOptions": {
    "enableFPSPanel": true
}

温馨提示

必须在真机上才能看到

permission

小程序接口权限相关设置

例如：小程序定位设置，配置如下

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
   }
}

app.json 文件配置如下

{
    "entryPagePath": "pages/index/index",
    "pages": [
        "pages/news/news",
        "pages/index/index",
        "pages/logs/logs",
        "pages/about/about"
   ],
    "window": {
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "第一个小程序",
        "backgroundColor": "#000000",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
   },
    "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": "v2",
    "sitemapLocation": "sitemap.json",
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
   },
    "debug": true,
    "permission": {
        "scope.userLocation": {
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
   },
    "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": "v2",
    "sitemapLocation": "sitemap.json",
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
   },
    "debug": true,
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
       }
   },
    "debugOptions": {
        "enableFPSPanel": true
   }
}

1. 小程序全局配置中，那个属性可以开启 debug 调试模式：debug

单页面配置

app.json 中的部分配置，也支持对单个页面进行配置可以在页面对应的 文件.json 文件来对本页面的表现进行配置

配置项

页面文件.json 文件配置

虽然配置与 app.json 基本一致，但是注意，不在需要添加 window 作为父级

{
    "usingComponents": {},
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第二个页面",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true,
    "onReachBottomDistance": 50,
    "style":"v2"
}

1. 小程序中，单个文件的配置中，那个是可以修改导航栏文本：navigationBarTitleText

全局配置_公共样式

在项目根目录的 app.wxss 文件为小程序公的共样式表，相当与CSS初始化文件配置

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式

WXSS 用来决定 WXML 的组件应该怎么显示

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有

公共样式

在 app.wxss 文件中添加样式

text{
    color:red;
}

项目中所有的页面的 text 文本都会呈现红色

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

在 news 页面的 wxml 文件中增加下列代码

<view class="box"></view>

在 app.wxss 文件中，增加 box 盒子的样式

.box{
    width: 200rpx;
    height: 200rpx;
    background: red;
}

在iphone5上的效果，元素的宽高是85px

在iphone6上的效果，元素的宽高是100px

样式导入

使用 @import 语句可以导入外联样式表， @import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束在项目根目录下创建 common 文件夹，并创建 common.wxss 文件，增加box 的样式
.box{
    margin: 50px;
}

在 app.wxss 文件中引入 common.wxss 文件

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

此时，刚刚所创建的 box 也加载了引入文件的样式

1. 在微信小程序中，可以根据屏幕宽度进行自适应大小的单位是：rpx

全局配置_注册小程序

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

生命周期

通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程

方法说明

我们来修改初始 app.js 文件，代码如下

// 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("系统切换主题时触发");
 }
})

1. 在微信小程序中，监听项目启动的函数是：onShow

onShow

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

在 app.js 文件中增加全局属性

// app.js
App({
  globalData: {
    userInfo: "我是全局属性"
 }
})

我们在 news.js 文件中读取全局属性

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

当然，我们也可以在页面中显示，首先修改 news.js 文件

Page({
    data:{
        message:""
   },
    onLoad(options) {
        const appInstance = getApp()
        // 关于this.setData({}),后续会详细讲解，目前我们知道可以给message赋值即可
        this.setData({
          message:appInstance.globalData.userInfo
       })
   }
})

修改 news.wxml 文件显示内容

1. 在小程序中，页面里可以读取全局属性的方案正确的是：appInstance.globalData

页面的生命周期函数

注册小程序中的一个页面。指定页面的生命周期函数

页面的生命周期函数

我们在 news页面中的 news.js 文件中去增加这些生命周期函数

Page({
    data:{
        message:""
   },
    onLoad(options) {
        console.log("页面加载");
        const appInstance = getApp()
        this.setData({
           message:appInstance.globalData.userInfo
       })
   },
    onShow() {
        console.log("页面显示");
   },
    onReady() {
        console.log("页面初次渲染完成");
   },
    onHide() {
        console.log("页面隐藏");
   },
    onUnload() {
        console.log("页面卸载");
   }
})

生命周期函数的作用

在不同的生命周期函数，根据业务需求，可以增加业务。例如：我们可以在 onShow 函数中修改 data 中的数据

Page({
    data:{
        hello:"hello"
   },
    onShow() {
        this.setData({
            hello:"大家好"
       })
   }
})

温馨提示

目前我们需要记忆这些生命周期函数，在后续的学习中，我们会不间断的使用。大家自然了解他了

1. 在小程序中，页面隐藏会触发的生命周期函数是：onHide

页面中的Data对象

data 是页面第一次渲染使用的初始数据

页面加载时， data 中的数据将会以 JSON 字符串的形式由逻辑层传至渲染层，因此 data 中的数据必须是可以转成 JSON 的类型：字符串，数字，布尔值，对象，数组

我们在 news.js 文件中增加 data 对象，并增加相应的数据,显示在页面中

// news.js文件
Page({
    data:{
        hello:"hello",
        num:10,
        flag:true,
        user:{
            name:"iwen",
            age:20
       },
        names:["iwen","ime","frank"]
   }
})

<!-- news.wxml文件 -->
<text>{{ hello }}</text>
<text>{{ num }}</text>
<text>{{ user.name }}</text>
<text>{{ names[1] }}</text>

setData函数

setData 函数用于将 data 中的数据进行修改，并发送到视图层

我们在 news.js 文件中修改 data 中的数据，我们可以尝试在 onLoad 中修改 num 的属性值

Page({
    data:{
        message:"",
        hello:"hello",
        num:10,
        flag:true,
        user:{
            name:"iwen",
            age:20
       },
        names:["iwen","ime","frank"]
   },
    onLoad(options) {
        this.setData({
            num:20
       })
   }
})

我们可以观察到页面中的 num 数字发生了变化为20

微信小程序框架(一)-全面详解（学习总结---从入门到深化）（下）

全局配置_tabBar属性

全局配置_常用其他配置

style

sitemapLocation

networkTimeout

debug

debugOptions

FPS 面板

开启方式

permission

单页面配置

全局配置_公共样式

公共样式

尺寸单位

样式导入

全局配置_注册小程序

onShow

页面的生命周期函数

生命周期函数的作用

页面中的Data对象

setData函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序框架(一)-全面详解（学习总结---从入门到深化）（下）

全局配置_tabBar属性

全局配置_常用其他配置

style

sitemapLocation

networkTimeout

debug

debugOptions

FPS 面板

开启方式

permission

单页面配置

全局配置_公共样式

公共样式

尺寸单位

样式导入

全局配置_注册小程序

onShow

页面的生命周期函数

生命周期函数的作用

页面中的Data对象

setData函数

热门文章

最新文章

相关课程

相关电子书

相关实验场景