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

开始

日常学习踩过的坑

// 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

<include src="header.wxml"/>

2.共同属性

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

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

@import './test_0.wxss'

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

3.小程序路由

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

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

4.更新数据通信

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

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

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

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

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

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

<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)，向好友转发下载好的文件。

自定义底部工具栏

问题集锦

1.常见问题

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

2.用户隐私

自2023-09-15起，对于调用涉及用户隐私的小程序接口，要求弹出隐私信息窗口，让用户手动授权，授权之后才能正常调用接口。

小程序必须在后台声明用到的用户隐私接口，对于没有声明的涉及隐私的接口，用户同意协议之后，也不能正常调用。

公众号开发

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

微信支付对接

商户号：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版本

相关文档

文档总结

1. 关于OpenId和UnionId

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

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

待续...

2.发货信息

抖音小程序

1.电商插件小程序

2.电商小程序权限

不同的小程序类目拥有不同的电商插件权限，一个小程序同时只可以拥有一个权限。