什么是小程序相信我也不必介绍大家一定都是知道的, 我这里的本意是整理一份小程序的文档, 一方面加深自身的记忆, 另一方面也是官方文档有点多, 不太好熟悉自己找一些感觉自身比较常用的提炼出来方便记忆 ;

搭建环境

注册账号我这里就不说了 直接上链接 微信公众平台 需要注意的是注册账号时记得选择小程序选项 ; 注册成功后会进入一个类似于小程序的后台管理页面 ; 其他的就不说了 建议大家看一遍, 重点在 开发

下一步安装开发工具, 微信小程序开发工具安装及其简单, 这里不描述具体安装步骤 附上地址 大家根据自身的系统自行安装吧

打开咱们刚安装的编辑器 -> 选择小程序 -> 点击 + ; 自行创建项目, 这里的 AppID 就是上面提到的管理后台中开发选项中的AppID 复制即可 ; 这里建议大家先不要选用云开发 后面我会单独开一章说 ;

工具

这里咱们只说一下主体内容, 其余功能自己探索吧 ;

目录结构

├─pages
│  ├─index  // 对应每个页面 内部必须包含以下四个文件
│  │      index.js  // 页面逻辑
│  │      index.json // 页面配置
│  │      index.wxml // 页面结构
│  │      index.wxss // 页面样式
│  └─logs
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
└─utils  // 工具类
│      util.js
│  app.js  // 描述小程序整体逻辑
│  app.json  // 小程序公共配置
│  app.wxss  // 小程序公共样式
│  project.config.json // 项目配置文件
│  sitemap.json
/**
* 需要注意的是 page 中4个文件必须同名
**/
复制代码

小程序配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

{ 
    // 配置小程序默认启动页
    "entryPagePath": "pages/logs/logs",
    // 对应小程序中的每一个页面,如果没有 entryPagePath, pages中的第一项为启动页
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window": {
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#ccc",
        // 导航栏文字颜色 white black
        "navigationBarTextStyle":"white",
        // 导航栏文字内容
        "navigationBarTitleText": "wx",
        // 下拉 loading 样式 dark light; 需要配置下面这个配置才能开启
        "backgroundTextStyle": "dark",
        // 是否开启全局的下拉刷新
        "enablePullDownRefresh": true,
        // 导航栏样式 custom, default; custom以上配置全部失效,只保留右上角胶囊, topBar需要自己写样式定义
        "navigationStyle": "custom"
    },
    "tabBar": {
        // tabBar 文字颜色
        "color": "#444",
        // tabBar 文字选中颜色
        "selectedColor": "#f1f1f1",
        // tabBar 背景颜色
        "backgroundColor": "#fff",
        // tabBar 上边框颜色
        "borderStyle": "#ccc",
        // 最多配置5个 tab, 最少2个
        "list": [
            // 必须在 pages 中存在
            "pagePath": "pages/index/index",
            // tab 名字
            "text": "homePage",
            // 建议大小 81*81 不支持网络图片
            "iconPath": "",
            "selectedIconPath": ""
        ]
    }
}
复制代码

每一个小程序页面也可以使用 .json 文件对本页面的窗口表现进行配置 页面配置项会覆盖 app.json 的 window 中相同的配置项

页面配置

WXML 语法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data ; 数据绑定使用双大括号语法 与 Vue 基本一致 , 但是也有些许不同 , 简单总结一下就是小程序中的 页面里面所有的表达式都应在 {{}} 内部去做

<view>{{ message }}view>

<view class="item-{{ id }}">view>
复制代码

Page({
    data: {
        message: "hello world",
        id: 123
    }
})
复制代码

列表渲染

<view wx:for="{{ list }}" wx:key="{{ index }}">
    <text>{{ item.uname }} -- {{ item.uage }}text>
view>
复制代码

Page({
    data: {
        list: [
            { uname: 'zs', uage: 23 },
            { uname: 'ls', uage: 24 },
            { uname: 'we', uage: 25 },
            { uname: 'mz', uage: 26 }
        ]
    }
})
复制代码

条件渲染

<view wx:if="{{ isShow }}">是否渲染view>
<view wx:elif="{{ !isShow }}">分支判断view>
<view wx:else>否则view>
复制代码

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式 ; WXSS 具有 CSS 的大部分特性 , 为了更适合小程序开发 , 对 CSS 也做了对应的扩充和修改 尺寸单位(rpx) 样式导入(@import)

生命周期

小程序的生命周期分为三种, 分别是 app page component 这里咱们只说一下前面的两种

App

• onLaunch : 监听小程序初始化
• onShow : 小程序启动时和后台切回前台的时候被调用
• onHide : 小程序切入到后台时调用

App({
    onLaunch() {
        console.log('onLaunch...');
    },
    onShow() {
        console.log('onShow...');
    },
    onHide() {
        console.log('onHide...');
    }
})
复制代码

Page

• onLoad : 页面加载时触发 , 一个页面只会调用一次 , 可以在 onLoad 的参数中获取当前打开页面所携带的参数
• onShow : 页面显示时和切入前台时被调用
• onReady : 页面初次渲染完成时触发只调用一次 类似于 vue 中的 Mounted
• onHide : 页面隐藏和切入后台时调用, 如wx.navgationTo 或 tab 切换
• onUnload : 页面卸载时触发 , 如 wx.redirectTo或wx.navigationBack到其他页面时

Page({
    // 默认获取到的是空对象, 如果传递有参数就是参数对象
    onLoad(params) {
        console.log(params);
    },
    onShow() {
        console.log('page--onShow...');
    },
    onReady() {
        console.log('page--onReady...');
    },
    onHide() {
        console.log('page--onHide...');
    },
    onUnload() {
        console.log('page--onUnload...');
    }
})
复制代码

App 和 Page 之间的顺序为

启动时 : ApponLaunch onShow Page onLoad onShow onReady

切后台 : Page onHide App onHide

切前台 : App onShow Page onShow

事件

相信看这个文章的人都是能够使用 JavaScript 的 ; 所以 js 就不说了 简单说一下事件吧 , 内容也比较多

<button type="primary" bindtap="clickMe">click mebutton>
复制代码

Page({
    clickMe(event) {
        console.log(event)
    }
})
复制代码

组件

个人理解这个组件可以理解为微信又基于一些HTML做了二次封装 ; 这里内容比较多, 但是大部分都不是很难 , 直接放链接吧 , 建议文档反复观看并实践

API

微信提供的接口还是比较多的 这里也不说了 详情看这里