项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息。
最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。
服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。
所以肯定是先尝试最简单的小程序订阅消息啦!
项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息。
最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。
服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。
所以肯定是先尝试最简单的小程序订阅消息啦!
目前小程序分包大小有以下限制:
- 整个小程序所有分包大小不超过 20M
- 单个分包/主包大小不能超过 2M
随着项目的不断迭代,小程序的主包会越来越大, 终究会有一天会超过 2M
的主包限制,首先考虑到的就是图片资源放到 CDN
或者 OSS
,起初会很奏效,但是随着一些JS库的加入就没办法了,即使使用了 .min
版本,或者精简了类库代码,主包还会很大,这时候就会用到项目分包了。
页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的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
信息用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。
小程序包含一个描述整体程序的 app
和多个描述各自页面的 page
。
刚刚接触到小程序,使用 微信开发者工具 新建完项目之后,会有一个这样的初始结构:
├─pages
│ ├─index
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxml
│ logs.wxss
│
├─utils
│ util.js
├─ app.js
├─ app.json
├─ app.wxss
├─ project.config.json
└─ sitemap.json
发现我安装小程序开发者工具是18年的事情了,那个时候还没有开始学 vue
,算是开始填早几年立的一个 📌Flag 吧。
当时是想给我们的烘焙工作室的公众号做一个配套的营销工具,所以在18年底有去了解,只不过后来只做了一个展示型网站 岁礼气球派对,后来又改版了好几次现在主营是派对布置,好了有点扯远了。
填坑的动力主要是业务驱动,因为现在正好有这个任务安排,在回顾2020也大概提到了。所以今天先开始概括一下没有开发过小程序的前端,对于小程序的一些疑问。