微信小程序学习笔记，持续记录。

房东的狗丶

发布于 2023-02-17 14:08:13

1.6K0

文章被收录于专栏：友人a的笔记丶友人a的笔记丶

开始

1. 小程序开发指南（入门必读）：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ace6c9603786b008636f2e56c0a

2. 完整开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework

3. 小程序全局配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

日常学习踩过的坑

getApp()，返回全局唯一的应用实例。而getCurrentPages() 是获取当前页面栈的数组。数组中第一个元素为首页，最后一个元素为当前页面。不同于Vue中的data配置属性，Page对象的data属性不是体现到Page对象上面。

Page.setData()，逻辑层向视图层发送页面数据，视图层开始重新渲染，视图层向逻辑层反馈用户事件。在整个Page({})里面，this关键字指代Page({})整个对象；

需要在 Page 中定义了分享回调才会显示小程序的分享按钮。开发者自身打开小程序会显示控制台。

小程序的渲染层和逻辑层是两个线程，相互的任何操作都是异步的。组件上的data属性将会在事件发生时被传递。

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

文档学习记录

1.WXML 提供两种文件引用方式import和include。

import

可以在该文件中使用目标文件定义的 template，在 index.wxml 中引用了 item.wxml，就可以使用 item模板，需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

<import src="item.wxml"/>

include

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

<include src="header.wxml"/>

2.共同属性

所有wxml 标签都支持的属性称之为共同属性

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000ee2c29d4f805b0086a37a254c0a

共同属性

WXSS引用：在小程序中，我们依然可以实现样式的引用，样式引用是这样写

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

选择器

3.小程序路由

wx.navigateTo、wx.navigateBack、wx.redirectTo、wx.navigateToMiniProgram、wx.reLaunch、wx.switchTab

小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；
wx.navigateBack会销毁一个页面层级。每当一个页面层级被用于渲染页面，微信都会提前开始准备一个新的页面层级，使得每次调用wx.navigateTo都能够尽快展示一个新的页面。
对于wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化：重新传入页面的初始数据、路径等，视图层清空当前页面层级的渲染结果然后重新渲染页面。
wx.navigateToMiniProgram，打开另一个小程序；
wx.reLaunch，关闭所有页面，打开到应用内的某个页面
wx.switchTab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4.更新数据通信

初始渲染完毕后，视图层可以在开发者调用setData后执行界面更新。在数据传输时，逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将setData所设置的数据字段与data合并，使开发者可以用this.data读取到变更后的数据。

因此，为了提升数据更新的性能，开发者在执行setData调用时，最好遵循以下原则：

不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；
数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据；
与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下。

初始渲染完毕后，视图层可以多次应用setData的数据。每次应用setData数据时，都会执行重渲染来更新界面。

初始渲染中得到的data和当前节点树会保留下来用于重渲染。每次重渲染时，将data和setData数据套用在WXML片段上，得到一个新节点树。然后将新节点树与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后，将setData数据合并到data中，并用新节点树替换旧节点树，用于下一次重渲染。

5.WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

wxs模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。

<wxs src="./../logic.wxs" module="logic" />

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

Api学习记录

1.交互

a.类似alert的消息提醒框

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

b.模态对话框，文本输入框、确认框等

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

c.加载框

//显示加载框
wx.showLoading({
  title: '加载中',
})

//关闭加载框
setTimeout(function () {
  wx.hideLoading()
}, 2000)

wx.showLoading 和 wx.showToast 同时只能显示一个
wx.showLoading 应与 wx.hideLoading 配对使用

d.操作菜单

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

e.开启、关闭小程序页面返回询问对话框

wx.enableAlertBeforeUnload(Object object)/wx.disableAlertBeforeUnload(Object object)

2.分享

3.导航栏

a.显示导航栏加载效果

wx.showNavigationBarLoading({
    success:function(){},
    fail:function(){},
    complete:function(){}
})

b.隐藏导航栏加载效果

wx.hideNavigationBarLoading({
    success:function(){},
    fail:function(){},
    complete:function(){}
})

c.默认设置导航栏标题

wx.setNavigationBarTitle({
     title: '当前页面'
})

d.设置页面导航条颜色

wx.setNavigationBarColor({
  frontColor: '#ffffff',
  backgroundColor: '#ff0000',
  animation: {
    duration: 400,
    timingFunc: 'easeIn'
  }
})

e.隐藏返回首页按钮：wx.hideHomeButton(Object object)

微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

f. wx.shareFileMessage(Object object)，向好友转发下载好的文件。

自定义底部工具栏

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

问题集锦

微信小程序网络相关的API需要设置上传域名、下载域名、websocket域名、业务域名。
小程序版本提交后需要审核、审核之后需要发布。
ios input输入框placeholder字体大于input的字体时，会导致placeholder字体显示不全。

公众号开发

access_token有效时间为2小时，一天可申请2000次；
填写服务器配置时，验证接口和token时，接口若确认此次 GET 请求来自微信服务器，需要原样返回 echostr 参数内容，才可以接入生效，成为开发者，否则接入失败。
收到用户消息时，不支持推送表情消息；

微信支付对接

首先通过composer安装sdk：https://github.com/wechatpay-apiv3/wechatpay-php

jssdk api，通过微信支付平台证书申请工具申请API证书；复制请求串-->安全验证-->复制证书串-->证书生成成；

官方文档：https://wechatpay-api.gitbook.io/wechatpay-api-v3/ren-zheng.

商户证书序列号：账户中心】->【账户设置】->【API安全】能看到的证书序列号，是「商户证书」序列号；

生成api V3 的key，复制商户号；生成微信平日证书；

在启用新的平台证书前，微信支付会提前24小时把新证书加入到平台证书列表中；

file://证书路径都要带上协议名称；

商户号：1617---713
商户证书序列号：5A74783920926------------39B18BBFEA3D
api V3 Key：q4616------------------06735h

微信支付平台证书：vendor/bin/CertificateDownloader.php -k q4616250*********79106735h -m 161****713 -f runtime/key/key.pem -s 
5A74783920926**********839B18BBFEA3D -o runtime/key

1. Api版本

微信支付接口分为v2和v3版本，api密钥不一致，证书是一致的。https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

文档总结

1. 关于OpenId和UnionId

OpenId 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。

UnionId 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者只需要在微信开放平台下绑定相同账号的主体。就可通过UnionId，实现多个小程序、公众号、甚至APP 之间的数据互通。

同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。

待续...

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度