我全都要

官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

# 初始化
npm init
# 安装包
npm install [package]

打开开发者工具，在本地设置中，勾选使用 npm 模块，
安装完之后 点击开发者工具中的菜单栏：工具 –> 构建 npm

会额外生成一个 miniprogram_npm 目录 是开发者工具构建 npm 时生成的，可以理解为小程序版的 npm 包。

在需要的地方引入，以 regenerator 为例

// 引入 regenerator-runtime
const regeneratorRuntime = require('regenerator-runtime')

旧文章害死人

研究了半天，突然发现开发工具在 1.02.1904282 以及之后版本中，增加了增强编译已支持 Async/Await 语法

2024-05-08 更新日志第一条

已下内容已过期 (文章刚发布一小时)

微信小程序中原生支持 async await 语法，前提是需要关闭 ES6 转 ES5 后

在开启 ES6 转 ES5 后 async 函数无法使用，可以使用 regenerator 包来解决。新版本的 regenerator 在小程序中无法使用，会报如下错误：

regenerator

原因是 regenerator 包更新了 Function 函数，具体可参考：
https://github.com/facebook/regenerator/pull/369
https://github.com/facebook/regenerator/commit/063f14ef7f01bb29830e3f17e9ef151e7a5cb2f3

可以直接使用老版本来解决这个问题，或者修改源码，把 Function 改回去

直接使用老版本

npm install regenerator@0.13.1

如果使用了 npm 模块，之后在需要使用 async 语法的 js 中直接引入即可

const regeneratorRuntime = require('regenerator-runtime')

如果没有使用 npm 模块，不能直接 require 包名，需要将包提取出来，并引入完整路径

const regeneratorRuntime = require('../../libs/regenerator-runtime')

参考：微信小程序中使用 npm 包

去年开始国内无法正常访问 wordpress.org, 一直显示 429 Too Many Requests 错误，所以在我们使用 wordpress 程序的时候会发现无法在线安装主题或者插件，甚至无法更新 WP 版本。

WordPress 官网打不开原因可以参考：https://www.hostloc.com/thread-597678-5-1.html

情况大致是因为：

wordpress.org 受到了中国大陆流量的攻击，导致 WordPress 的 CDN 提供商屏蔽了中国大陆的流量，大陆用户访问插件主题商城等服务时报 429 错误。

这里推荐一款插件：WP-China-Yes

此插件将全面替换 WordPress 访问官方服务的链接为高速稳定的中国大陆节点，以此加快站点更新版本、安装升级插件主题的速度，并彻底解决 429 报错问题。

插件是开源的

发布地址：https://www.ibadboy.net/archives/3204.html
下载地址：https://github.com/wp-china-yes/wp-china-yes/releases

使用：

下载并安装插件后直接启用即可，无需设置，插件会自动接管所有 WP 访问境外服务器的流量。
插件不会更改你的 WordPress 程序，若不想使用大陆加速节点，直接停用插件即可。

常见问题：
插件 / 主题更新缓慢甚至超时
这种情况在大型包更新的情况下偶尔会出现，原因是第一次访问资源，云存储中还未有相应的镜像，再试一次就会好了。

2025-03-19
真机调试报错 r.Canvas is not a constructor
原因：canvas 2d 和 webgl 暂不支持真机调试，请直接使用真机预览，真机预览模式下使用 vConsole 调试

基础代码 (使用 Canvas 2D 接口)

Component({
  data: {
    ctx: '',
    image: ''
  },
  methods: {
    onLoad: function(options) {},
    onReady: function() {
      const query = wx.createSelectorQuery()
      query
        .select('#sign')
        .fields({ node: true, size: true })
        .exec(res => {
          console.log(res)
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          console.log(ctx)

          const dpr = wx.getSystemInfoSync().pixelRatio
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          ctx.scale(dpr, dpr)

          ctx.lineWidth = 4 //线条的宽度
          ctx.strokeStyle = '#333' //线条的颜色
          ctx.lineCap = 'round' //定义线条开头和结尾处的形状
          ctx.lineJoin = 'bevel' // 线条与线条之间的连接方式，该属性有三个属性值：miter（默认值，尖角），bevel（衔接），round（圆角）。
          this.setData({
            ctx: ctx
          })
        })
    }
  }
})

实现手写效果

使用 catchtouchmove 绑定，默认会阻止页面跟着滑动

<canvas type="2d" id="sign" bindtouchstart="bindtouchstartHandler" catchtouchmove="catchtouchmoveHandler"></canvas>

bindtouchstartHandler(e) {
  if (e.type != 'touchstart') return false
  let ctx = this.data.ctx
  //开始本次绘画
  ctx.beginPath()
  //画笔起始点
  ctx.moveTo(e.touches[0].x, e.touches[0].y)
},
catchtouchmoveHandler(e) {
  let left = e.currentTarget.offsetLeft
  let top = e.currentTarget.offsetTop
  let pageX = e.touches[0].pageX
  let pageY = e.touches[0].pageY

  let ctx = this.data.ctx
  //根据鼠标路径绘画
  ctx.lineTo(pageX - left, pageY - top)
  //立即渲染
  ctx.stroke()
}

使用 bindtouchmove，需要单独处理页面跟着滚动的问题

给 canvas 绑定 bindtouchmove=”touchmoveHandler” 然后绑定空的 catchtouchmove 事件 catchtouchmove="preventTouchmove" 或者直接 catchtouchmove="ture"

<canvas type="2d" id="sign" bindtouchstart="bindtouchstartHandler" bindtouchmove="bindtouchmoveHandler" catchtouchmove="preventTouchmove"></canvas>

bindtouchstartHandler(e) {
  if (e.type != 'touchstart') return false
  let ctx = this.data.ctx
  //开始本次绘画
  ctx.beginPath()
  //画笔起始点
  ctx.moveTo(e.touches[0].x, e.touches[0].y)
},

// bind绑定的事件
bindtouchmoveHandler (e) {
  let ctx = this.data.ctx
  //根据鼠标路径绘画
  ctx.lineTo(e.touches[0].x, e.touches[0].y)
  //立即渲染
  ctx.stroke()
},
preventTouchmove () {}

保存到相册

wx.canvasToTempFilePath(Object object, Object this)
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

 // 把当前画布指定区域的内容导出生成指定大小的图片。 canvas2d不需要使用draw方法
canvasToTempFilePath() {
  return new Promise((resolve, reject) => {
    const query = wx.createSelectorQuery()
    query
      .select('#sign')
      .fields({ node: true, size: true })
      .exec(res => {
        // console.log(res)
        const canvas = res[0].node
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          fileType: 'jpg',
          canvas: canvas,
          success(res) {
            console.log(res.tempFilePath) // 文件临时地址 可以保存到相册或上传
            resolve(res.tempFilePath)
          }
        })
      })
  })
},

// 保存本地
saveToAlbum() {
  this.canvasToTempFilePath().then(file => {
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              wx.saveImageToPhotosAlbum({
                filePath: file,
                success() {
                  wx.showToast({
                    title: '保存成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                  })
                }
              })
            },
            fail() {}
          })
        } else {
          // 有授权直接保存
          wx.saveImageToPhotosAlbum({
            filePath: file,
            success() {
              wx.showToast({
                title: '保存成功'
              })
            },
            fail() {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  })
}

WordPress 在升级程序、主题、插件时，都会先切换到维护模式，也就是显示 ‘Briefly unavailable for scheduled maintenance. Check back in a minute’，如果升级顺利，也就几秒左右就恢复正常；但是如果由于网速不佳等原因导致升级中断，WordPress 就会一直停留在维护模式，不论前台还是后台。

如何解决这个问题呢？

马上通过 FTP 登录你的网站，删除 WordPress 根目录下的 .maintenance ，刷新网页即可。

修改 host 方式

访问 http://tool.chinaz.com/dns 或 https://www.ipaddress.com/

查询以下三个链接的 DNS 解析地址

github.com
assets-cdn.github.com
github.global.ssl.fastly.net

找到 TTL 值最小的 IP，修改系统 Hosts 文件

之后刷新系统 DNS 缓存

Windows+X 打开系统命令行（管理员身份）或 powershell

运行 ipconfig /flushdns 手动刷新系统 DNS 缓存。

利用国内代码管理平台中转

利用码云 (gitee)

新建仓库 - 导入已有仓库 将 github 仓库 clone 到 gitee 中

如果项目中有子模块，同理也需要 clone 到 gitee 中，同时修改主仓库中的 .gitmodules 文件，将子模块的地址修改为 gitee 地址

使用 GitHubDesktop 客户端

使用代理

仅仅开代理是不行的，需要单独配置

如果使用 HTTPS 协议克隆需要如下配置

# 设置代理
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080

#取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

使用 SSH 协议克隆需要如下配置

修改.ssh/config

Host github.com
Hostname github.com
ProxyCommand connect -S 127.0.0.1:1080 %h %p

1080 端口换成你本地代理客户端的 socks 端口

github.com.cnpmjs.org 镜像站

git clone https://github.com/vuejs/vue.git
# 改为
git clone https://github.com.cnpmjs.org/vuejs/vue.git

https://github.com/521xueweihan/GitHub520

SwitchHosts v4.0.2
https://github.com/oldj/SwitchHosts/releases/tag/v4.0.2

支持 Windows、macOS、Linux、IOS、Android、Synology、QNAP、Western Digital MyCloud NAS 等

使用官方根节点

1、创建账号

https://my.zerotier.com

2、创建网络

进入 https://my.zerotier.com/network 点击 Create 创建网络，点击进入已创建的网络 此时可以看到 Network ID，后续添加设备都会需要这个 ID

Access Control，默认是 Certificate (Private Network)，选择此模式表示每次在添加新的主机时，需要手动勾选是否允许连接，如果选择 None (Public Network) 模式，表示加入网络后自动分配 IP 并允许连接，从安全性来说建议使用默认选项 Certificate (Private Network)，方便性来看 None (Public Network) 更方便，不用每次加入网络后手动勾选。

好了，一个中转的 ZeroTier 就配置完成了，接下来只需要在其他设备安装所对应的客户端，然后加入到这个网络中就可以了。

搭建私有节点（moon）

搭建私有节点是为了解决根节点在国外，速度慢，且不稳定

安装

curl -s https://install.zerotier.com/ | sudo bash

# 安装成功后
# *** Success! You are ZeroTier address [ b32fxxxxxx ].

配置 Moon

cd /var/lib/zerotier-one

# 生成 moon.json 配置文件
zerotier-idtool initmoon identity.public >> moon.json

# 编辑 moon.json 配置文件，修改 stableEndpoints
vim moon.json

"stableEndpoints": ["你服务器公网ip/9993"]

# 生成 .moon 文件 私有网络的 zerotier 标志性文件
zerotier-idtool genmoon moon.json
# 此命令会生成一个签名文件在当前目录下，文件名如 000000b32fxxxxxx.moon （b32fxxxxxx 为 ZeroTier address)

# 移动文件
# 将生成的 000000b32fxxxxxx.moon 移动到 moons.d 目录
mkdir moons.d
mv 000000b32fxxxxxx.moon moons.d

# 重启 zerotier-one 服务
systemctl restart zerotier-one

# 加入虚拟网络
# zerotier-cli join af415e486f26xxxx //  af415e486f26xxxx 为在 zerotier 官网创建的网络

将内网机器连接上 moon 节点

执行命令

# windows 在 C:\ProgramData\ZeroTier\One 目录下执行
zerotier-cli orbit 000000b32fxxxxxx 000000b32fxxxxxx # moon 服务器的ID值 输入2遍

查看是否连接

# 在其他机子执行以下命令是否显示该 moon 节点
# 或在 moon 服务器上执行命令否显示 LEAF 节点
zerotier-cli listpeers

200 listpeers <ztaddr> <path> <latency> <version> <role>
200 listpeers xxxxxxxxxx xx.xx.xx.xx/4532;1037;853 183 1.6.4 LEAF
200 listpeers xxxxxxxxxx xx.xx.xx.xx/9993;19869;4337 0 - PLANET
200 listpeers xxxxxxxxxx xx.xx.xx.xx/9993;4337;4167 170 - PLANET
200 listpeers xxxxxxxxxx xx.xx.xx.xx/9993;363;4274 63 - PLANET
200 listpeers xxxxxxxxxx xx.xx.xx.xx/9993;19508;4192 145 - PLANET

Dockerfile

https://docs.docker.com/engine/reference/builder/

https://github.com/zerotier/ZeroTierOne/tree/master/ext/installfiles/linux/zerotier-containerized

docker build . -t zerotier

为什么要使用 rel=’noopener’？

举个例子: a.html 和 b.html 两个页面

a.html

<a href="b.html" target="_blank">da</a>

b.html

<script>window.opener.location.href ="http://wqdy.top"</script>

其中在 a.html 中有个超链接，点击后在新标签页打开 b.html 页面，但是发现原 a.html 页面已经变成了其他页面。原因是使用 target=_blank 打开新的窗口时，赋予了新的窗口一些权限可以操作原窗口，其中 window.location 就是一个。

为了防止 window.opener 被滥用，提高网站的安全性，在使用 targrt=_blank 时需要加上 rel=noopener，同时为了兼容也可以加上 rel=noreferrer。

微信公众平台

• 注册账号进入后台：设置 -> 开发设置 -> 拿到 AppID（创建小程序项目使用）

• 每个邮箱仅能申请一个小程序（未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱）

体验小程序

微信开发者工具

• 开发者工具

• 需要使用注册小程序的微信扫码登录

• 本地开发时：详情 - 项目配置，将 不校验合法域名勾上

小程序项目结构

代码构成

pages/ ---------------- 页面（组件），所有页面都应该放到这个目录中
  index/  ------------- index页面文件夹
    index.js ---------- index页面的逻辑代码
    index.wxml -------- index页面的HTML结构
    index.wxss -------- index页面的CSS样式
    index.json -------- 页面配置（可选）
utils/ ---------------- 公共工具（函数）
app.js ---------------- 入口文件
app.json -------------- 全局配置（包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等）
app.wxss -------------- 全局样式（CSS）
project.config.json --- 开发工具配置（例如ES6转ES5、界面颜色、编译配置等）

配置

全局配置: app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

页面配置 配置本页面的窗口表现 ， 同全局配置中的 window 项配置，如果页面中的配置与全局配置冲突，是以页面配置为准

页面路径列表 -pages 配置项

• 所有需要展示的页面都要在 app.json 中进行配置，pages 数组的第一项表示进入小程序的默认页面
• 每一项开头不需要添加 /，否则报错
• 推荐：所有页面放到 pages 目录中，文件名称与文件夹名称相同
• 说明：在 app.json 中配置 pages，可以快速创建页面

标签栏 - tabBar 配置

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序
• list 中每一个菜单项的 pagePath 属性必须在 pages 中配置
• 文字颜色以及选中项文字颜色，只能统一设置不能单独设置
• 注意：没有出现在 tabBar.list 的 pagePath 页面不展示标签栏

WXML

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

数据绑定

• WXML 中的动态数据均来自对应 Page 的 data

• 小程序中插值表达式的特点

  • 插值表达式中可以直接使用 data 中提供的数据
  • 可以在属性中使用
  • 只能使用表达式，不能出现语句（if、for 等）
  • 注意：小程序中的插值表达式不支持方法调用 ！！！需要通过特殊的机制来实现该功能
  • 小程序中的数据绑定是单向的，不是双向的

Page({
  data: {
    msg: 'hello',
    isCheck: true
  }
})

<text>{{ msg }}</text>
<input type="text" value="{{ msg }}" />
<checkbox checked="{{isCheck}}"></checkbox>

绑定数据的具体类型 (Booleal)

<!-- 绑定的是字符串 false,转换成布尔值是 true， checkbox 是选中状态 -->
<checkbox checked="false"></checkbox>

<!-- 绑定的是布尔值 false, checkbox 是未选中状态 -->
<checkbox checked="{{false}}"></checkbox>

<!-- 绑定的是字符串 false, checkbox 是选中状态 -->
<checkbox checked="{{'false'}}"></checkbox>

运算

Page({
  data: {
    flag: 0,
    a: 1,
    b: 2,
    c: 4,
    d: 8,
    length: 3,
    name: 'zs'
  }
})

<!-- 三元运算 -->
<!-- hidden -->
<view hidden="{{flag === 0 ? true : false}}">hidden</view>

<!-- 算数运算 -->
<!-- 13 + 4 + d -->
<view>{{ 10 + a + b}} + {{c}} + d</view>

<!-- checkbox是未选中状态 -->
<checkbox checked="{{a > b}}"></checkbox>

<!-- checkbox是选中状态 -->
<!-- 花括号与引号间有空格，被解析成字符串 -->
<checkbox checked=" {{a > b}}"></checkbox>

<!-- 逻辑判断 -->
<view wx:if="{{length > 5}}">逻辑判断</view>

<!-- 字符串运算 -->
<view>{{ 'name:' + name }}</view>
<!-- name:zs -->

注意： 花括号与引号间不要有空格，否则被解析成字符串

条件渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

wx:if

<view wx:if="{{ isLoading }}">
  <text>数据加载中...</text>
</view>
<view wx:else>
  <text>搞定啦~</text>
</view>

<!-- 隐藏多个元素，不改变 wxml的层级结构 -->
<block wx:if="{{ isLoading }}">
  <text>小明</text>
  <text>小红</text>
</block>

hidden

<view hidden="{{ isLoading }}">
  <text>搞定啦~</text>
</view>

列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

• wx:for：遍历数组，在元素中通过 index 获取索引号，通过 item 获取当前项
• wx:for-index="i"：替换默认的 index
• wx:for-item="v"：替换默认的 item
• 注意：遍历时，需要添加 wx:key 属性，来提高渲染性能 (wx:key 的值不需要添加 item.)，如 wx:key="id"，如果 item 本身是一个唯一的字符串或者数字，可以使用保留关键字 *this(代表在 for 循环中的 item 本身) 作为 key 值

<view wx:for="{{ list }}" wx:for-index="i" wx:for-item="v" wx:key="id">
  {{i}}: {{v.message}}
</view>

注意：1. 也可以用来渲染一个对象，index 表示 key，item 表示 value。2. 可以用一个 block 标签包裹，将循环写在 block 标签上，且 block 标签并不会渲染到 dom 中

<block wx:for="{{[1, 2, 3]}}">
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

模板

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

定义模板

<!-- name 属性作为模板的名字 -->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
  </view>
</template>

可以将模板写在单独的一个 wxml 文件中，并通过 import 导入使用

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

注意：is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

<template is="msgItem" data="{{...item}}" />

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template'
    }
  }

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块

引用

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/import.html

import

import 可以在该文件中使用目标文件定义的 template，如：

在 item.wxml 中定义了一个叫 item 的 template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item 模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

WXSS

WXSS(WeiXin Style Sheets)，用于描述 WXML 的组件样式

与 css 相比，WXSS 扩展的特性有：

• 尺寸单位

  rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

• 样式导入

  使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 结束

WXSS 中的注释需要使用多行注释

/* */

全局样式、局部样式： app.wxss page.wxss

动态样式：
style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

如果通过 wxss 使用背景图片，不能使用本地资源图片，可以使用网络图片，或者 base64；推荐使用 <image/> 标签来展示图片

<view style="color:{{color}};" />
<view class="{{myclass}}" />

选择器

目前支持的选择器有：.class #id element ::after ::before

基本组件

https://developers.weixin.qq.com/miniprogram/dev/component/

view 组件（标签）

类似于 HTML 中的 div，用来布局

hover-class 属性，指定按下去的样式类，其他属性使用见：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

text 组件

类似于 HTML 中的 span，行内元素

详细使用文档： https://developers.weixin.qq.com/miniprogram/dev/component/text.html

注意：如果想要文本选中功能，必须使用 text 标签，并且添加 selectable 属性，除了文本节点以外的其他节点都无法长按选中

text 标签中只能嵌套 text 标签

decode 可以解析的有   < > & '    

可以使用 \n 来换行，在编辑器中按回车键换行也会解析出换行

icon 组件

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

使用 type 指定 icon 的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

button 组件

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

注意：如果设置了 type 属性，hover-class 属性会失效

input 组件

输入框。该组件是原生组件

属性：
placeholder-style: 指定 placeholder 的样式
placeholder-class: 默认值 input-placeholder 指定 placeholder 的样式类
maxlength: 默认 140，设置最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing: 默认 0，指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
confirm-type: 默认 done，设置键盘右下角按钮的文字，仅在 type=’text’时生效
adjust-position: 默认 true，键盘弹起时，是否自动上推页面

image 图片组件

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

image 标签是 web 中 img 标签和背景图片的结合体

常用属性

src：图片资源地址

mode：图片裁剪、缩放的模式

lazy-load：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

show-menu-by-longpress: 开启长按图片显示识别小程序码菜单

binderror: 当错误发生时触发，用于图片加载失败时显示默认图片

注意：图片有默认宽高，默认宽高为：320 * 240 px；默认不会保持宽高比

swiper 轮播组件

默认宽度 100%，高度 150px

scroll-view

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

navigator

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

open-type 的合法值

wx.navigateTo ，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
wx.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch 的功能，关闭所有页面，打开到应用内的某个页面
wx.navigateBack 的功能，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
getCurrentPages

url 可以使用绝对路径或相对路径，使用绝对路径时需要添加 /

<navigator url="/pages/index/index" open-type="navigate">sdfsf</navigator>
<navigator url="./index/index" open-type="navigate">sdfsf</navigator>

自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

普通页面也可以使用 Component 构造器来创建，提供 observers 支持数据监听，类似 vue 中的 watch

还可以扩展 conputed，类似 vue 计算属性

数据操作

全局数据

app.js

App({
  globalData: {
    url: 'hhh'
  }
})

在 app.js 文件中，直接使用

this.globalData.url // 获取
this.globalData.url = 'qqq' // 修改

在其他非 app.js 文件中使用

let App = getApp()
let url = App.globalData.url // 获取
App.globalData.url = 'hhh' // 修改
App.globalData.name = 'zs' // 添加

页面内数据

获取数据

getMsg () {
  console.log(this.data.msg) // 和 vue 中的不同
}

修改数据

• setData
• setData()：更新数据
  • 说明：将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
  • 修改 data 中的数据
  • 更新视图，也就是说：视图中使用该数据的地方会重新渲染

changeMsg () {
  this.setData({
    name: "jack"
  }, function () {
    // 回调函数
  })
}

注意：小程序中的数据不是双向绑定的，而是单向的！！！所以，无法直接修改 data 中的数据来将数据的变化显示在页面中，即通过 this.data.msg = '修改后的数据' 方式修改数据后，页面中不会显示该数据的变化

• 文本框操作：

<input value="{{ input }}" bindinput="inputChangeHandle" />

Page({
  inputChangeHandle: function(e) {
    this.setData({ input: e.detail.value })
  }
})

事件处理

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

• 绑定事件：bindtap、catchtap
• 说明：bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡

• 事件对象可以携带额外信息，如 id, dataset, touches：通过标签的自定义属性 data-*，实现给事件传递参数（不能使用函数调用的形式）

• 连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符：data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType，data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype

• mark 也可以用于承载一些自定义数据（类似于 dataset ）

<button bindtap="sayHi" data-msg="zs">按钮</button>

Page({
  sayHi(event) {
    console.log(event)
    console.log('单击事件触发了', event.currentTarget.dataset.msg)
  }
})

WXS

作用： 辅助构建页面结构的

不支持 es6 语法

<!-- 语法结构 -->
<wxs module="tools">
  function fn (arg) {
    return arg + 10
  }
  // 导出一个对象
  module.exports = { fn: fn }
</wxs>

<!-- 使用 -->
<view>使用wxs：{{ tools.fn(8) }}</view>

UI 库

• weui-wsxx

生命周期

两个生命周期：应用生命周期、页面生命周期

• app 生命周期
• 页面 生命周期

小程序发送请求

wx.request(Object object)

关于小程序中网络相关 API 的说明

在实际的项目中需要在 开发设置 中配置 服务器域名，然后小程序才能发送请求获取数据，但在开发期间，可以忽略这一步，在开发工具右上角的 详情 菜单中，勾选 不校验安全域名、TLS版本以及HTTPS证书

在小程序不用考虑跨域的问题，因为小程序是基于微信这个客户端

无法在小程序中使用 XHR 对象，发送请求

api

wx.previewImage (Object object) 全屏预览图片

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

<image src="{{tools.replace(src)}}" bindtap="previewImage" data-current="{{ src }}" data-urls="{{ item.images }}"></image>

// 图片预览
previewImage (e) {
  // 获取需要预览的图片链接
  let {dataset: { current, urls}} = e.currentTarget

  // 将图片替换为大图
  current = current.replace('w.h', '1000.1000')
  urls = urls.map(item => {
    return item.replace('w.h', '1000.1000')
  })

  // 调用预览图片 API
  wx.previewImage({
    current, // 当前显示图片的http链接
    urls // 需要预览的图片http链接列表
  })
}

wx.saveImageToPhotosAlbum 保存图片到相册

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html

wx.pageScrollTo(Object object)

将页面滚动到目标位置

选择节点 wx.createSelectorQuery ()

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

https://developers.weixin.qq.com/miniprogram/dev/framework/view/selector.html

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery () 来代替

文件系统

文件系统
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html

上传文件
https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

文件管理器
https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html

页面事件处理函数

onPageScroll(Object)

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPageScroll-Object-object

监听用户滑动页面事件。

Object 参数说明：
scrollTop Number 页面在垂直方向已滚动的距离（单位 px）

onPageScroll(scroll) {
  console.log(scroll.scrollTop)
}

小程序中授权功能

• 打开小程序设置页（wx.openSetting）接口调整
• openSetting 的问题
• wepy 爬坑记 - openSetting

wx.getSetting({
  success(res) {
    console.log('success: ', res)
    // 根据获取到的用户授权信息判断用户是否同意过授权
    if (res.authSetting['scope.address'] === true) {
      // res.authSetting['scope.address'] ===> true
      // 已经授权，并且已经同意
      // 直接打开 收获地址 页面
      wx.chooseAddress({
        success(res) {
          console.log('是否确认同意授权：', res)
        }
      })
    } else if (res.authSetting['scope.address'] === false) {
      // res.authSetting['scope.address'] ===> false
      // 已经授权，并切没有同意
      // 弹出确认框，引导用户去授权
      wx.showModal({
        title: '温馨提示',
        content: '您需要授权后，才能使用收获地址功能，是否打开授权界面',
        success(res) {
          if (res.confirm) {
            // 点击确定按钮
            wx.openSetting({
              success(res) {
                // console.log(res)
                // 此处，可以通过 res.authSetting['scope.address'] 来获取到用户
                // 是否同意授权
                if (res.authSetting['scope.address']) {
                  // 用户同意授权小程序使用通讯地址这个开发接口
                  wx.chooseAddress({
                    success(res) {
                      console.log('是否确认同意授权：', res)
                    }
                  })
                } else {
                  console.log('用户本次还是不同意小程序使用通讯地址')
                }
              }
            })
          } else {
            // 点击取消按钮
            console.log('取消')
          }
        }
      })
    } else {
      // res.authSetting['scope.address'] ===> undefined
      // 没有授权
      // 第一次点击按钮
      wx.chooseAddress({
        success(res) {
          console.log('是否确认同意授权：', res)
        }
      })
    }
  }
})

分包加载

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

与 vue 的区别

• 小程序中 插值表达式可以用在属性中

• 小程序中的插值表达式默认不支持方法调用，需要通过特殊机制来实现

<!-- 以下不会再视图中输出内容，也不会报错 -->
<view>{{[1, 2].join('-')}}</view>

• 小程序中的数据操作

  • 获取数据 this.data.msg
  • 更新数据 this.setData({ msg: 'something' })

• 绑定布尔值

<!-- vue 中 -->
<xx :xx="true"></xx>

<!-- 小程序中 -->
<xx xx="{{true}}"></xx>

• 小程序中绑定事件时，不能直接调用事件处理程序，所以传参需要通过自定义属性

• 遍历数据

  小程序中 wx:for = "lists", 而 Vue 是 v-for = "item in lists"

todomvc 案例

• 每个框架或库都应该写一个 todomvc，来了解这个框架的使用模式是怎样的

功能

• 1 欢迎界面（没有任务就展示欢迎界面，有任务就展示任务列表）
  • 注意：欢迎界面 和 任务列表 只能二选一
• 2 展示任务列表
• 3 添加任务
  • 剩余任务数量会改变
• 4 任务状态切换（完成和未完成）
  • 剩余任务数量会改变
  • 当所有的任务都完成，隐藏剩余任务数量展示
• 5 删除任务
  • 剩余任务数量会改变（删除未完成任务）
• 6 切换所有任务的选中状态
  • 只要有一项是选中的，那么，就应该让其他项也选中
• 7 展示清除已完成任务按钮
  • 1 当有已完成的任务，就展示
  • 2 单击清除已完成任务按钮，会清除所有已完成的任务

任务中需要频繁处理的操作：
1 清除已完成任务按钮 的展示和隐藏
2 剩余任务（未完成任务）的展示和隐藏

other

微信小程序 —— button 按钮去除 border 边框：使用 button::after{ border: none; } 来去除边框

button navogator 组件默认有点击态，可以添加 hover-class="none" 去除

getCurrentPages () 方法
https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

页面间数据传递

let page = getCurrentPages()
console.log(page)
let prevPage = page[page.length - 2]
// 修改上个页面的数据
prevPage.setData({ msg: 'hehehe' }, () => {
  wx.navigateBack()
})

部分破解软件可在 TG 频道里下载

待整理

嬴政天下 Adobe 全家桶
视频剪辑
图片
录屏
fluent terminal
Mem Reduct

RaiDrive
typora
allavsoft 视频下载
Mobile Debug

MorphVOX Pro 变声器