项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息。
最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。
服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。
所以肯定是先尝试最简单的小程序订阅消息啦!
项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息。
最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。
服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。
所以肯定是先尝试最简单的小程序订阅消息啦!
今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。
首页 => wx.navigateTo =>
新功能列表页 => wx.navigateTo =>
新功能添加页 => wx.redirectTo =>
新功能详情页 => 返回按钮 =>
新功能列表页 => 返回按钮 =>
首页
结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack
返回也不行。
监听了 wx.navigateBack
的 success
、fail
、complete
三个回调之后发现,success
和 fail
都不执行,只执行了 complete
的回调,输出为:
complete: {errMsg: "fail:navigateBack intercepted"}
目前小程序分包大小有以下限制:
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
随着项目的不断迭代,小程序的主包会越来越大, 终究会有一天会超过 2M
的主包限制,首先考虑到的就是图片资源放到 CDN
或者 OSS
,起初会很奏效,但是随着一些JS库的加入就没办法了,即使使用了 .min
版本,或者精简了类库代码,主包还会很大,这时候就会用到项目分包了。
今天开发的小程序遇到了一个问题,在 iPhone8 iOS 12.2
的设备上访问出现了高度崩塌的问题,但是在其它的型号的 iOS 和 Android 设备上没有复现,
一开始以为是 微信版本 的问题,但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex
上,修改为 block
之后高度就不会崩塌了,但是元素的样式就没办法做了。
页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的DEMO
小程序的插槽用法和 Vue
的 slot
几乎一模一样,现在组件内需要的地方加入插槽(<slot>
)节点就行了。也可以直接查看小程序提供的 🔗 代码片段
<!-- 组件模板 P.S. 设置语言类型为html是因为wxml没有高亮 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
是不是很简单,需要使用到具名插槽的话,只需要在组件的 options
中开启 多slot支持 multipleSlots
就可以了。
在实际业务场景中,最常接触到的就是拉取微信登陆了,但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢?
最少的需要使用到1个微信开放接口:wx.login
,
如果需要获取用户头像和昵称,需要调用 wx.getUserProfile
方法 (wx.getUserInfo
已调整【尾声#1】),并且需要在绑定在按钮上 ,并会唤起授权提示;
如果需要获取用户手机号信息,需要在按钮上绑定 getPhoneNumber
事件。
一般来说非敏感信息可以直接调用,含有敏感信息的接口需要绑定在按钮上,在用户自行操作之后才可以调用。
在小程序中发送网络请求,需要使用微信提供的API,提供了5种:
wx.request
)wx.uploadFile
)wx.downloadFile
) wx.connectSocket
)wx.createUDPSocket
)一般项目中使用频率最高的是 wx.request
和 wx.uploadFile
需要注意的是,小程序只可以跟指定的域名进行网络通信,需要事先设置通讯域名(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)。
可以查看 配置流程 了解一下具体注意项。
一开始按照 Vue 的思路下来,会认为生命周期很重要,需要完整的看一遍,但是其实整个小程序开发完之后,生命周期的概念其实并不是很重要,
大概分成 小程序
的生命周期 和 页面/组件
的生命周期。
这些生命周期函数中 主要就是使用 onShow
和 onLoad
两个,用来获取和设置初始参数,发起请求等等。
其它的几个回调函数其实很少有用到,但是还是聊一聊吧。
以前一直都是写的 Vue,所以在刚接触小程序的时候会疑惑,小程序是否也有和 Vue 一样有路由表,但是看完开放文档之后发现没有路由表,就很疑惑。
那小程序怎么去做页面跳转的呢?
app.json
)中有 pages
信息用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。