微信小程序

Frank
  • 前端进阶
大约 4 分钟约 1283 字...

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

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

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

全局配置文件的使用

全局配置open in new window

pagesopen in new window

使用全局配置制作菜单栏

tapbaropen in new window

页面级别的配置项

页面配置open in new window

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

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中找到相应的事件处理函数事件open in new window
  • 改变数据:this.setData({ xxx:xxx, })

逻辑层中的 api

apiopen in new window

视图层的数据绑定

wx:ifhidden 的区别

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

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

xxx = '{{false}}'

视图层循环展示内容

wx:foropen in new window wx:key='*this'

block 占位符

视图层的代码拆分

import 和 include 引用open in new window

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

组件&样式

组件open in new window

rpx 单位

wxcss:默认屏幕宽度为 750rpx

踩坑备忘

image 组件

imageopen in new window

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

swiper 组件

swiperopen in new window

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

常用配置项:

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

⚠️ 注意

以下内容未订正!!!

rpx

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

数据绑定

数据绑定open in new window

不要直接写 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}}

简易双向绑定open in new window

页面跳转

标签实现页面跳转 navigatoropen in new window js 实现页面跳转 wx.redirectTo open in new windowwx.navigateToopen in new window

icon 的使用

iconopen in new window

页面背景颜色的修改

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

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

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

page {
  background-color: #eee;
}
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1