微信小程序

小程序文件类型及代码结构介绍

一个页面由 4 个文件组成：xx.js,xx.json,xx.wxml,xx.wxss

项目根目录下，也有这样的 3 个文件app.js,app.json,app.wxss，为全局的逻辑，配置，样式

全局配置文件的使用

全局配置

pages

使用全局配置制作菜单栏

tapbar

页面级别的配置项

页面配置

全局逻辑中的生命周期&全局方法及数据的定义及调用方式

app.js:全局生命周期+全局可以调用的方法和数据（页面中使用 getApp()可以拿到 app 实例，可以调用全局方法和数据）

// 创建一个小程序
App({
  // 生命周期函数指的是在某一时刻会自动执行的函数
  // 在小程序启动的时候，自动执行的函数
  onLaunch(options) {
    console.log('onLaunch', options)
  },
  // 在小程序重新展示的时候，自动执行的函数
  onShow(options) {
    console.log('onShow', options)
  },
  // 在小程序取消展示的时候，自动执行的函数
  onHide() {
    console.log('onHide')
  },
  // 当脚本执行错误时，自动执行的函数
  onError(msg) {
    console.log('onError', msg)
  },
  //  自定义的全局方法
  sayHello() {
    return 'say hello'
  },
  // 全局数据，也可以单独列出。
  globalData: {},
})

页面级别的生命周期函数

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')
  },
})

页面逻辑层数据的定义及与页面的串联

• bindtap='xxx' 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数事件
• 改变数据：this.setData({ xxx:xxx, })

逻辑层中的 api

api

视图层的数据绑定

wx:if 与 hidden 的区别

wx:if 删除了 DOM，而 hidden 只是做了样式的隐藏， DOM 依然存在

还有不要直接写 xxx="false"，其计算结果是一个字符串 要这样写:

xxx = '{{false}}'

视图层循环展示内容

wx:for wx:key='*this'

block 占位符

视图层的代码拆分

import 和 include 引用

// 如果想在模板中使用外层的数据需要这样写。
<template is="item" data="{{text: 'forbar'}}" />

组件&样式

组件

rpx 单位

wxcss：默认屏幕宽度为 750rpx

踩坑备忘

image 组件

image

注意图片裁剪、缩放的模式mode

swiper 组件

swiper

轮播图直接使用 swpier,其中放置swpier-item

常用配置项：

autoplay = '{{true}}' // 自动播放
circular = '{{true}}' // 是否采用衔接滑动
indicator - dots ='{{true}}' // 是否显示面板指示点
interval = '3000' // 自动切换时间间隔
duration = '1500' // 滑动动画时长

::: warning ⚠️ 注意 以下内容未订正！！！ :::

rpx

素材的页面宽度为 375px,那么在微信小程序中页面的宽度为 750rpx，为两倍的关系，那么在设置样式的时候应该乘以 2 （比如：搜索栏宽度为 340px,微信小程序中就应该设置 680rpx）

数据绑定

数据绑定

不要直接写 xxx="false"，其计算结果是一个字符串, 要加双括号

xxx={{false}}

text iamge

text 里面直接写 image 标签加载不出来

远程数据获取

// 获取数据写在onLoad()生命周期函数中
wx.request({
  url: 'https://www.fastmock.site/mock/929c195d9002940292c129ee5a38cdf4/mooc/data',
  success: res => {
    const {
      data: { data },
    } = res
    const { swiperList, courses } = data
    this.setData({
      swiperList,
      courses,
    })
  },
})

数据双向绑定

model:value="{{Ivalue}}

简易双向绑定

页面跳转

标签实现页面跳转 navigator js 实现页面跳转 wx.redirectTo wx.navigateTo

icon 的使用

icon

页面背景颜色的修改

当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。

这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色

如果要设置页面背景颜色，得在 wxss 中自定义样式，如下：

page {
  background-color: #eee;
}