[视频] 大家好，我是深圳职业技术学院移动互联专业主任王老师。今天我给大家分享如何从 0 到 1 开发一个小程序，帮助新手开发者，快速入门小程序开发。  小程序开发有哪几步呢？一共有三个部分。 首先，你需要知道如何使用微信开发者工具，其次你需要了解如何注册，拥有一个属于自己的小程序。最后，你需要了解微信小程序的基本架构，并创建自己的第一个微信小程序。 网页开发者在开发网页的时候，只需要使用浏览器，并且搭配一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序账号、安装小程序开发者工具、配置项目等过程。小程序运行环境要求如图所示。 [图片]

微信小程序的Skyline是微信小程序团队近期推出的接近原生渲染的渲染引擎，我尝试了用skyline输出了一款Uniapp+wordpress的壁纸小程序。 [图片] 今天在项目提交后我也记录下skyline开发中的各种新特性和难点。文尾附上代码。 先来看下项目上线的效果。 [视频] 可以微信扫码跳转小程序体验。 [图片] 比比轻壁纸整个项目均是skyline打造，因此需要在app.json中定义如下两个参数 "renderer": "skyline", "lazyCodeLoading": "requiredComponents", 此项目中，我也仅仅用到了skyline特性的冰山一角，因此更多的特性大家移步去官方文档中查看。 1.共享元素 最吸引我的地方的是共享元素特性，他能实现不同页面的元素无缝衔接。 官方的介绍是： 在连续的 Skyline 页跳转时，页面间 key 相同的 share-element 节点将产生飞跃特效，开发者可自定义插值方式和动画曲线。通常作用于图片，为保证动画效果，前后页面的 share-element 子节点结构应该尽量保持一致。 比比轻壁纸项目中大量使用了共享元素动画，让图片以丝滑般的交互进行呈现: [图片][图片] 实现的方法也非常简单，仅需在不同页面把图片用<share-element></share-element>包裹起来，定义相同的id即可。 默认的动画就已经很丝滑了，官方对动画交互还给出了许多自定义的属性，方便自定义更多的动画。 共享元素文档：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/share-element.html 2.自定义路由 自定义路由真的绝了，仅仅几行css3样式属性，就能让两个页面的切换交互实现各种高难度动作。 项目中，全部的弹层交互、页面过度特效均由自定义路由轻松搞定，不同的路由交互仅需在官方提供的路由代码上修改两三行代码即可实现。 尤其是页面中有弹层内容显示或者半屏显示时，自定义路由非常实用。 [图片] 自定义路由文档：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/custom-route.html 3.手势系统+worklet 目前项目中仅仅在图片返回时用到了手势，手势拖拽图片下滑，即可实现图片缩放回到上页 [图片] 手势系统文档：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/gesture.html 4.吸顶布局 在小程序里，我们实现吸顶布局用到的是position:sticky。此次skyline直接给出了<sticky-header></sticky-header>实现吸顶，同时结合<sticky-section></sticky-section>能实现多重吸顶 [图片] 吸顶文档： https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html 以上四个新特性是项目中特别值得推荐的，下面说一下开发难点 1.兼容问题 如果你是从webview项目中切换过来，你会发现页面会变的凌乱不堪，完全不堪入目。这个时候，需要一点耐心。因为新的skyline使用的类似nvue模式，即默认全部使用弹性盒模型display:flex属性，暂不支持display:block，而这个属性会导致宽度和高度变得弹性，你不定义某个子标签的宽高可能就看不到这个内容显示或者挤成一团。 经过使用后，总结了几点： a.使用display:flex最好带上flex-direction: column/rowb.形变的时候用flex-shrink: 0试试c.当横向滚动使用scroll-view并用了display:flex属性，不定义高度的话，scroll-view内容就看不到了2.常用的css属性支持度 目前正式版还未发布，常用的伪类、var等还未支持，需要这些特性的需要再等等。 导致的问题包括图标字体的使用等，可以看看官方给出的解决方案或者使用svg图标 特性兼容进度：https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/status.html 3.第三方组件问题 如果你的项目之前用到了第三方组件，可能在skyline模式下大量兼容报错，目前考虑换微信小程序官方的组件或者自己写自定义组件 4.项目发布后还是webview框架？ 项目提交发布后还需要做全量skyline测试 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/#%E9%85%8D%E7%BD%AE-We-%E5%88%86%E6%9E%90-AB-%E5%AE%9E%E9%AA%8C 附上项目的小程序demo代码（非uniapp源码）仅供大家学习 https://github.com/shiheme/smartgallery

快速知悉 小程序用户头像昵称获取规则调整选择地理位置接口调整公告监听小程序异步组件加载失败回调 wx.onLazyLoadError 接口调用频率规范 1. 小程序用户头像昵称获取规则调整 点击查看 小程序用户头像昵称获取规则调整 公告 自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持），具体实践可见下方《最佳实践》。小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.21.2 以下版本的头像昵称获取需求：上述「头像昵称填写能力」从基础库 2.21.2 版本开始支持（覆盖微信 8.0.16 以上版本）。对于来自更低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正  常返回用户头像昵称，插件通过 wx.getUserInfo 接口将返回用户头像昵称，开发者可继续使用以上能力做向下兼容。对于上述 ，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表： [图片] *针对低版本基础库，兼容处理可参考 兼容文档 请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。 最佳实践 小程序可在个人中心或设置等页面使用头像昵称填写能力让用户完善个人资料： [图片] 2.选择地理位置接口调整公告 点击查看 选择地理位置接口调整 公告 为确保选择地理位置接口的合理使用，自 2022 年 6 月 13 日起，wx.choosePoi 和 wx.chooseLocation 接口规则进行以下调整： wx.choosePoi 和 wx.chooseLocation 接口的使用将不再需要用户授权 scope.userLocation，满足使用条件的开发者可直接调用，详情可访问 授权；若开发者调用 wx.choosePoi 和 wx.chooseLocation 接口，需在小程序用户隐私保护指引中，声明收集用户选择的位置信息的目的，详情可访问 用户隐私保护指引填写说明；wx.choosePoi 接口的回调信息中，latitude 和 longitude 字段将不返回真实的经纬度信息，全部返回 ( 0 , 0 )，详情可访问 接口文档。以上调整将对所有小程序、小游戏和插件生效。 3.监听小程序异步组件加载失败回调 wx.onLazyLoadError  在小程序中，不同的分包对应不同的下载单元；因此，除了非独立分包可以依赖主包外，分包之间不能互相使用自定义组件或进行 require。 「分包异步化」特性将允许通过一些配置和新的接口，使部分跨分包的内容可以等待下载后异步使用，从而一定程度上解决这个限制。 点击查看 分包异步化 完整官方文章。 在基础库 2.24.3 之后，可以使用 wx.onLazyLoadError 监听加载事件。 注意事项： 加载异步组件通常需要下载分包，若分包下载超时，则会触发 errMsg 为 "loadSubpackage: timeout" 的回调，默认超时等待时间为 5 秒。可以通过第二个参数指定超时时间（单位：ms），该设置全局有效，多次指定超时时间则覆盖前面。分包确认下载失败时，会再次触发 errMsg 为 "loadSubpackage: fail" 的回调。若在页面中使用该接口进行监听，请确保在必要时手动调用 offLazyLoadError 取消监听，以避免非预期的内存泄漏。点击查看  分包异步化  官方文档 4.接口调用频率规范 小程序 wx 接口可分为“普通接口”和“限频接口”。 开发者可登录小程序管理后台 - 开发管理 - 接口设置中查看“限频接口”调用情况。 目前，“限频接口”包括以下接口： wx.loginwx.checkSessionwx.getSettingwx.getUserInfowx.getUserProfile4.1 频率规范 [图片] Tips: 微信后台会延迟一天统计上一天的小程序 pv 总数和 api 调用总数，超过规范总数的会提醒尽快调整。 4.2 优化方法 开发者可以参考以下方法对“限频接口”的调用频率做优化： 把上一次调用接口的返回结果缓存下来以供后续逻辑复用，而不是重新调用接口避免在定时循环的逻辑内重复调用“限频接口”避免在页面初始化事件onLoad、onShow、onReady中调用限频接口，应该在小程序初始化事件onLaunch中调用以下是错误用法和正确用法示例： wx.getSetting 错误用法:setInterval(() => {   wx.getSetting() }, 5000) wx.getSetting 正确用法:let setting wx.getSetting({   success(res) {     setting = res   } }) // 在需要获取地理位置时 if (setting.authSetting['scope.userLocation']) {   wx.getLocation({     success(res) {},     fail(res) {       if (res.errMsg.indexOf('auth deny') >= 0) {         // 如果权限没有开，引导用户打开设置页开启地理位置授权       }     }   }) } wx.getUserInfo 错误用法:Page({   onShow() {     wx.getUserInfo()   } }) wx.getUserInfo 正确用法:App({   onLaunch() {     wx.getUserInfo()   } }) 点击查看  接口调用频率规范  官方文档。

小程序性能优化课程基于实际开发场景，由资深开发者分享小程序性能优化的各项能力及应用实践，提升小程序性能表现，满足用户体验。

目前不少开发者在设置业务域名时，发现检查校验文件失败，可先按照如下步骤进行自查： 如果想保存的业务为https://test.com/，下载下来的校验文件为AbC.txt，则需要确保https://test.com/AbC.txt能够访问。 校验文件内容错误。校验文件内容一般是非HTML数据，如果下载下来的校验文件内容为HTML数据，一般为登录态过期。请重新登录小程序下载校验文件。 使用4G网络尝试访问链接，确认自身服务器没有拦截请求（常见于设置了白名单或者防火墙的服务器，需开发者自行确认下） https证书过期。请确保https证书处于有效期内。 使用curl 测试链接，确保curl能够正常访问链接，且curl出来的内容为校验文件内容。 使用time curl https://test.com/abc.txt查看链接时间，建议耗时在1s之内。 请确保url中的文件名与下载下来的文件名大小写一致。如下载的文件是AbC.txt，确保url是https://test.com/AbC.txt，不能是https://test.com/abc.txt 部分用户的服务器配置较陈旧，安全性差（如配置 768位 的 DH），为了保证通信安全，微信后台不支持，请更新服务器配置。     （1）通过https://cloud.tencent.com/product/tools#userDefined12，检测网址是否支持TLS1.2。     （2）可通过工具 https://www.ssllabs.com/ssltest/analyze.html 检查自己的服务器，对该工具标红的各项漏洞逐项修补，建议更新配置直到该工具打分为 C及以上 。 9. 如上述检查都没有问题，请重新下载校验文件重试，确保上传到服务器的文件内容与新下载的文件内容一致。