微信小程序开发指南

目录

一、介绍

官网
微信小程序，简称小程序，英文名 MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，对于用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。

小程序与普通网页开发区别

  • 小程序

    • 依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP
    • 在特定的环境中去开发，所用的组件、UI都是确定好了的，也不用去考虑兼容问题
    • 在速度上，小程序基于APP端去实现，在使用时就感到很流畅

  • 普通网页

    • 网页开发用在移动端或者PC端的网页开发技术
    • 开发时会有开发工具的选择、框架的选择、UI的选择等问题，还要兼顾到浏览器是否兼容的问题
    • 网页在不同的浏览器或设备中解析加载会比较慢一些
    • 网页运行在浏览器中，当然有一些App内嵌了浏览器也是可以运行的
    • 网页是需要通过网址来进行访问的

小程序与传统App区别

  • 小程序
    • 依赖于微信或其他APP上的一个应用形式，无法脱离其所在的APP
    • 无需要安装，开发技术要求较低，无需考虑应用兼容适配问题
  • 传统App：
    • 独立运行，不需要依赖于谁
    • 需要用户安装，开发技术要求较高且开发时还需要解决设备兼容适配问题

小程序框架结构

  • 整个小程序框架系统分为两部分：逻辑层(JavaScript) 和 视图层(WXML 和 WXSS)。
  • 在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
  • 只需要在逻辑层更改数据，视图层内容就会相应更新。

二、开发前准备工作

申请账号与登录设置

官网

获取APPID

appID作为小程序的身份的唯一标识，识别当前开发或运行在哪个小程序上面。

下载

推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

设置代理

目的是避免电脑上安装其他软件改变代理地址，影响开发

创建第一个项目

  1. 点击小程序---》点击+号
  2. 设置项目名称
  3. 设置存放地址
  4. 设置APPID
  5. 选择不使用云开发
  6. 选择开发语言
  7. 确认

三、项目文件结构与配置

文件结构


1.文件主体结构

文件 必填 描述
app.js 是 小程序逻辑-小程序入口文件
app.json 是 小程序公共配置文件
app.wxss 否 小程序公共样式表

2. 页面结构

一个小程序page页面由四个文件组成，分别是：

文件 必填 描述
js 是 页面逻辑
wxml 是 页面结构
wxss 否 页面样式表
json 否 页面配置

3. sitemap 配置
4. project.config.json
编辑器配置，项目中我们可以操作编辑器来动态修改project配置，不用我们去死记硬背哪些配置相关单词.
图片替换文本

配置

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
注意点：

  1. app.json中不能添加任何注释。
  2. key和value字符串必须用双引号引起来。
  3. 数组或对象最后一位不能有逗号。
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
字段 描述
debug debug调试是否开启
pages 注册小程序的页面路径列表
- 数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
window 全局的默认窗口表现
- 用于设置小程序的状态栏、导航条、标题、窗口背景色
tabBar 小程序底部或顶部菜单定义
networkTimeout 小程序网络请求超时时间设置
usingComponents 自定义组件配置

三、基本语法

视图结构 wxml

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxml是一个严格的标记性语言，有开始就必须有结束，单标签就一个有结束符。

1、数据绑定

语法：{{}}
在js逻辑层中定义数据源，在wxml通过插值表达式调用定义好的数据源中数据

<!-- wxml -->
<view>{{message}}</view>
<image srcc='{{src}}' />

<!-- page.js -->
page({
    data:{
        message:'ajgsdh',
        src:'sasd'
    }
})

2、setData修改数据源数值

语法：setData
通过一个setData方法来进行后续数据源数据的修改工作。
注意：this的指向问题，setData是当前页面对象中的方法。

<!-- page.js -->
onLoad(){
    setTimeout(()=>{
        this.setData({message:'你好'})
    })
}

3、for循环列表渲染

语法：wx:for

  • wx:for-index：指定数组当前下标的变量名（默认index）
  • wx:fpr-item：指定数组当前元素变量名（默认item）
  • wx:key：唯一标识符（提高性能，可定义也可以不定义）
data:{
    users:['张三','李四'],
    objArr:[
        {id:1,name:'搜索'},
        {id:2,name:'地方'}
    ]
}

用法一
<view wx:for='{{users}}' wx:key='{{index}}'>{{item}}--{{index}}</view>
用法二
<view wx:for='{{users}}' wx:for-index='key' wx:for-item='val' wx:key='{{key}}'>{{val}}--{{key}}</view>
用法三
<view wx:for='{{objArr}}' wx:key='{{item.id}}'>{{item}}--{{index}}</view>

4、if条件渲染

语法：wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if='{{age<10>}}'>青年</view>
<view wx:elif='{{age<20>}}'>少年</view>
<view wx:else>ss</view>

5、模块引用（包含）

WXML 提供两种文件引用方式：import和include
1）import

  1. 在user.wxml中定义一个item的template
<template name="user">
  <text>{{title}}</text>
</template>

注意： name template定义的模板名称，一个文件中可以定义多个template但name的名称不能重复

  1. 在 index.wxml 中引用了 item.wxml，就可以使用item模板
<import src="item.wxml"/>
<template is="item" data="{{title: '你好世界'}}"/>

注意：

  • is ：指定定义存在好的模板名称。
  • data ：向模板中传数据

2）include
把引入的文件内容直接复制到目录文件中。
template 不生效

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

样式wxss

WXSS是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

新增了尺寸单位

WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位
小程序中全屏尺寸数值是 : 750rpx

提供了全局的样式和局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

支持部分 CSS 选择器

选择器 样例 样例描述
.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有 view 组件
element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before view::before 在 view 组件前边插入内容

page生命周期

小程序数据互交就是通过不同的事件函数来完成的，了解生命周期函数，对于以后的数据交互是非常重要的。

名称 描述
onLoad(options) 页面加载时触发，可获取路径中的参数(1)
onReady() 页面渲染完成(1)
onShow() 页面显示/切入前台触发(N)
onHide() 页面隐藏/切入后台时触发(N)
onPullDownRefresh() 监听用户下拉动作，此事件需要在app.json文件中window节点中"开启全局的下拉刷新"enablePullDownRefresh":true,才能触发它
onReachBottom() 上拉触底事件，需要当前页内容超过一屏幕
onPageScroll() 滚动事件
onShareAppMessage() 自定义分享
onUnload() 页面卸载

四、事件

事件绑定

语法：bind:事件名='方法名'、catch:事件名='方法名'
注意：次奥程序中绑定</font color='red'>方法名不能用小括号()，直接写方法名称即可
bind：冒泡事件
catch：非冒泡事件
原生组件：camera、canvas、live-player、live-pusher、video、map、textarea、input
非原生组件：bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap='方法名'

<view bind:touchstart='start' bind:touchedn='end'></view>
<view bind:touchstart='click2' ></view>

click2(){}
...

事件对象

BaseEvent 基础事件对象属性列表

属性 类型 说明
type string 事件类型
timeStamp Integer 事件生成的时间戳
target Object 触发事件的组件的一些属性值集合 data-开头定义的属性
currentTarget Object 当前组件的一些属性值集合（对象）在组件中data-开头定义的属性 
getSomeData(evt){
    console.log(evt.type,'cc') //类型
    console.log(evt.timeStamp,Date.now(),'dd') //时间
    console.log(evt.target,'ee')  //属性
    console.log(evt.currentTarget,'ff') //属性
}

五、组件

组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间。

组件全部的生命周期函数

生命周期函数 参数 描述说明
created 无 在组件实例刚刚被创建时执行
attached 无 在组件实例进入页面节点树时执行
ready 无 在组件在视图层布局完成后执行
moved 无 在组件实例被移动到节点树另一个位置时执行
detached 无 在组件实例被从页面节点树移除时执行
error Object Error 每当组件方法抛出错误时执行

属性值

类型 描述 注解
Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型{
Number 数字 1, 2.5{
String 字符串 "string"
Array 数组 [ 1, "string" ]{
Object 对象 { key: value }{
EventHandler 事件处理函数名 "handlerName" 是 Page中定义的事件处理函数名

共同属性

属性名 类型 描述 注解
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean [false] 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
bind* / catch* EventHandler 组件的事件 详见事件
tab切换 
<view class='nav'>
    <view class='{{css[0]}}' data-index='{{0}}' bind:tap='tabfn'>栏目一</view>
    <view class='{{css[1]}}' data-index='{{1}}' bind:tap='tabfn'>栏目二</view>
</view>
<view class='cnt'>
    <view hidden='{{isshow[0]}}'></view>
    <view hidden={{isshow[1]}}></view>
</view>

Page({
    data:{
        css:['now',''],
        isshow:[false,true]
    },
    tabfun(event){
        let index=event.target.dataset.index //获取data-*传值
        let css=this.data.css
        let isshow=this.data.isshow.mao((item,key)=>{
            css[key]=''
            return true
        })
        css[index]='now'
        isshow[index]=false
        this.setData({isshow,css})
    }
})

自定义组件

  1. 新加组件(工具新加component)
  2. 需要引入组件的页面配置文件 json中定义 name path，
    {
    "usingComponents": {
        // 在父模板中调用的标签名    组件的路径
        "com-name": "path/to/the/custom/component"
    }
}
  3. 页面中调用组件
    <com-name>

组建通信

父--->子通信

原理：类似于vue 自定义属性--properties接收
父级:

<com-name name='测试'>

子集:

properties:{ 
    name:{
        type:String,
        optionalTypes:[String,Number]
        value:'123'
    }
}

子集--->父级

原理：类似于vue 自定义事件并（triggerEvent）传递---evt.detail
子集：

<view data-name='son' bind:Tap='sonClick'></view>

sonClick(evt){
    let name=evt.target.dataset.name
    this.triggerEvent('getName',{name},false)
}

父级:

<com-name bind:getName='click'/>

click(evt){![](https://img2020.cnblogs.com/blog/1731300/202109/1731300-20210927140557579-1531021586.jpg)

    let name=evt.detail
}

六、WXS模块

  • WXS（WeiXin Script）：是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  • WXS：中定义的函数可以在wxml文件中使用，可以用它来当过滤器使用。
  • WXS：以.wxs扩展名结尾，文件中代码写法和JS类似，不支持ES6写法
  • WXS：不是js（wxs只支持部份js语法）

写法与js类似，不支持ES6
创建wxs模块
tools.wxs

function mysub(str,len){
    return ...
}
module.exports={
    mysub:mysub
}

调用
在wxml文件去引用
引用的时候一定要用相对应地址
每个 wxs 模块均有一个内置的 module 对象。

<wxs src='../../tools.wxs' module='tools'/>
<view>tools.mysub('hfghaf')</view>

七、网络请求

wx.request(OBJECT)

  • 发起 HTTPS 网络请求,上线时一定要有https服务器，但在本机开发时可以没有https服务器
  • 测试支持的并数请求数5个
  • HTTPS 证书必须有效 而且是TLS1.2及以上版本
  • 最好要设置一下 app.json中request请求的超时时间
  1. 设置请求超时时间
    <!-- app.json -->
"networkTimeout":{
    "request":10000
}
  2. 封装请求
    <!-- http.js -->
const http = ({url,data={},method='Get',header={}})=>{
    wx.showLoading({
        title:'加载中'
    })
    return new Promise((resolve,reject)=>{
        wx.request({
            url,
            method,
            success:res=>{
                resolve(res)
            },
            fail:()=>{
                reject('fail')
            },
            complete:()=>{
                wx.hideLoading()
            }
        })
    })
}
  3. 配置请求地址
     <!-- config uri.js -->
 const host = 'http://localhost/api/v1'
 export default {
     new:'${host}/news'
 }
  4. 请求模型
    <!-- models newsModels.js -->
import http from '../utils/http'
import config from '../config/uri'
// 获取新闻列表
export const getNew=(page=1)=>{
    return http({
        url:config.news
    })
}
  5. 调用
    import {getNews} from '../../models/newsModel'
getNews().then(res=>{
    this.setData({
        news:res.data
    })
})

八、 缓存

小程序是有缓存的，但是它缓存没有过期时间，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
如果缓存达到了上限，清除缓存，清除缓存机制：最久未被使用。
重要的数据不要放在小程序缓存中。

/* 
    添加缓存封装
*/
var dtime = '_deadtime';

function put(k, v, t) {
    wx.setStorageSync(k, v)
    var seconds = parseInt(t);
    if (seconds > 0) {
        var timestamp = Date.parse(new Date());
        timestamp = timestamp / 1000 + seconds;
        wx.setStorageSync(k + dtime, timestamp + "")
    } else {
        wx.removeStorageSync(k + dtime)
    }
}
/* 
   获取指定缓存封装
*/
function get(k, def) {
    var deadtime = parseInt(wx.getStorageSync(k + dtime))
    if (deadtime) {
        if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
            if (def) {
                return def;
            } else {
                return;
            }
        }
    }
    var res = wx.getStorageSync(k);
    if (res) {
        return res;
    } else {
        return def;
    }
}
/* 
    移除单个缓存缓存封装
*/
function remove(k) {
    wx.removeStorageSync(k);
    wx.removeStorageSync(k + dtime);
}
/* 
    移除数组缓存缓存封装
*/
function removeList(arr) {
    arr.forEach(k => {
        wx.removeStorageSync(k);
        wx.removeStorageSync(k + dtime);
    })

}
/* 
    清空所有缓存
*/
function clear() {
    wx.clearStorageSync();
}
posted @ 2021-09-28 09:44  久宇诗  阅读(2716)  评论(0)  编辑  收藏  举报