微信小程序开发

Tom2023-09-162024-07-05

微信小程序开发

小程序web前端
必须运行在浏览中

微信小程序开发流程

注册微信小程序开发帐号微信公众平台
下载微信开发工具下载微信开发工具
编写代码
上传代码提交审核
审核通过发布小程序

微信小程序设计指南

友好礼貌
- 重点突出
- 流程明确
清晰明确
- 导航明确，来去自如
- 减少等待，反馈及时
- 异常可控，有路可退
便捷优雅
- 减少输入
- 避免误操作
- 利用接口提升性能
统一稳定
-
视觉规范
- 字体
- 字体颜色
- 列表
- 表单输入
- 按钮
- 图标

项目目录结构

pages 存储小程序页面
utils 全局的功能函数
app.js js主入口
app.json 主配置文件
- 小程序中所有页面都必须在 app.json pages中进行配置
- 小程序会默认显示 pages第一个成员
app.wxss 公共样式
project.config.json 项目配置

小程序配置

全局配置：配置所有页面及小程序相关设置
页面配置：只在当前页面配置。

基础语法

数据绑定： {{}}
- 组件内容插入数据
- 属性中插入数据，（{{}} 必须使用引号引起来）
条件渲染: wx:if wx:elif wx:else
列表渲染: wx:for wx:for-item wx:for-index wx:key="unique"
模板：
- 定义模板<template name="tempName" data="{{}}">
- 使用模板<template is="tempName">
引用
- 可以将模板定义在独立的文件中
- <import src="" />
事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。要给事件传递数据可以使用dataset
- 事件分类

给标签元素添加事件时需要在事件类型前添加一个前缀：bind catch
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

页面生命周期

// 获取应用实例
const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {
        },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
       
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
       
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    /*onShareAppMessage: function () {

    }*/
})