小程序开发-2

no time to die

小程序基础API

使用全局配置制定菜单栏（各个属性的应用）

参考微信开发文档—

1. https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
2. https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#resolveAlias

  "tabBar": {
    "color": "#000000",    
    "selectedColor": "#00bbb00",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./resources/home.png", 
        "selectedIconPath": "./resources/home-active.png",
        "text": "首页"
      },
  
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "./resources/my.png",
        "selectedIconPath": "./resources/my-active.png",
        "text": "我的"
      }
    ]
  },

问题：

1. 如何设置导航栏图标
   配置iconPath

2. 微信底部的导航栏，图标没有展示
   因为默认选择第一个导航栏，但是由于没有设置选中菜单时的图标，所以菜单的图标为空，此时可以设置一个selectedIconPath（表示导航被选中时展示的图标）

3. 为什么导航栏路径不能重复？

自定义tabBar

1. https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

页面级配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

全局级别生命周期函数

1. 认识全局逻辑层中的函数 app（）
2. app（）中的生命周期函数
   onlaunch(options) 在小程序启动时执行
   options中可以携带一些参数，
   path–启动小程序后进入的页面路径，
   scene–用户以哪种方式（场景）进入小程序
   
   了解小程序进入场景
   
   小程序被启停应用中断，重新返回小程序时，会执行onshow函数，但是onlaunch不会执行
   onshow（options）{}

app.js 文件

// 创建一个小程序
App({
  // 生命周期函数指的是在某一时刻会自动执行的函数
  // 在小程序启动的时候，自动执行的函数
  onLaunch(options) {
    console.log('onLaunch', options)
  },
  //小程序被其他应用中断，重新进入小程序时，自动执行的函数
  onShow(options) {
    console.log('onShow', options)
  },
  //小程序被其他应用中断 关闭小程序时，自动执行的函数，重新返回小程序时，会执行onshow函数，但是onlaunch不会执行
  onHide() {
    console.log('onHide')
  },
  // 当脚本执行错误时，自动执行的函数
  onError(msg) {
    console.log('onError', msg)
  },
  //自定义函数
  sayHello() {
    return 'say hello'
  },
  //全局函数
  globalData: {},
})

在页面级别的js文件中调用全局的js文件的内容

页面级的生命周期函数

微信开发文档—https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

index.js 文件

Page({
  // 在页面运行的某个时刻会自动执行的函数
  // 是页面被加载到内存里的时候，或者说页面第一次启动的时候
  onLoad() {
    console.log('onLoad')
  },
  // 是页面被加载到内存里的时候，或者说页面第一次启动的时候
  // 并且，页面被渲染完成之后自动执行
  onReady() {
    console.log('onReady')
  },
  // 页面每次被展示的时候自动执行
  onShow() {
    console.log('onShow')
  },
  // 页面每次被取消展示的时候自动执行
  onHide() {
    console.log('onHide')
  },
  // 每次下拉刷新时执行
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
  },
  // 页面到最底部时会自动执行 
  onReachBottom() {
    console.log('onReachBottom')
  },
  // 当你点击分享时自动执行的函数
  onShareAppMessage() {
    console.log('onShareAppMessage')
    return {
      title: 'share',
      path: 'pages/index/index'
    }
  },
  // 当页面滚动时自动执行的函数
  onPageScroll() {
    console.log('onPageScroll')
  }
})

页面逻辑层数据定义，数据与视图层的事件绑定
index.js 逻辑层

Page({
  data: {
    name: 'dell'
  },
  changeName() {
    this.setData({
      name: 'lee'
    })
  }
})

index.wxml 视图层

<view bindtap="changeName">   //事件绑定，点击触发逻辑层执行函数
  {{name}}
</view>

逻辑层API

查看微信开发文档： https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

视图层的数据绑定：

<view wx:if="{{showName}}" bindtap="handleTap">   //当变量为false，标签不会展示
  {{name}}
</view>
<checkbox checked="{{true}}"></checkbox>
<view hidden="{{!showHelloWorld}}">hello world</view>   //当hidden = false  ，标签会展示，但是会隐藏内容

视图层内容循环展示

<block wx:for="{{users}}" wx:key="*this">
  <view>hello</view>
  <view>world</view>
</block>

视图层直接的文件引入

使用 会造成逻辑嵌套较深（数据获取：视图层与视图层之间的引用，视图层和业务逻辑层之间的引用），不易维护和排查问题，

可以使用模板实现不同视图层之间数据的引用

test1.wxml – 视图层

<!-- 定义一个模板，供其他视图层文件引用,name是模板名称，在其他试图层文件可以直接通过名称引用 -->
<template name='content'>
  <view>{{content}}</view>
  <view>never give up</view>
</template>

test2.wxml – 视图层

<!-- 引入模板文件 当前文件无法直接使用模板中的变量，如果变量是在逻辑层定义的，必须使用data="{{模板名称:变量名}}"的方式引入-->
<import src="./test"></import>
<view>1</view>
<template is='content' data="{{content:second}}"></template>
<view>3</view>

index.js — 逻辑层

Page({
  data: {
     second:'the first time'
  },
})

微信组件的使用

<icon type="warn"></icon> 

小程序中的单位（rpx）

小程序中屏幕的固定宽度是750rpx 与手机机型无关