微信小程序学习日记 L09 消息推送

项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息

最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。

服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。

所以肯定是先尝试最简单的小程序订阅消息啦!

阅读全文

微信小程序返回键被劫持点击无效

今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。

具体跳转路由为:

首页 => wx.navigateTo => 新功能列表页 => wx.navigateTo => 新功能添加页 => wx.redirectTo => 新功能详情页 => 返回按钮 => 新功能列表页 => 返回按钮 => 首页


结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack 返回也不行。

监听了 wx.navigateBacksuccessfailcomplete 三个回调之后发现,successfail 都不执行,只执行了 complete 的回调,输出为:

complete: {errMsg: "fail:navigateBack intercepted"}
阅读全文

微信小程序学习日记 L08 分包加载

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

随着项目的不断迭代,小程序的主包会越来越大, 终究会有一天会超过 2M 的主包限制,首先考虑到的就是图片资源放到 CDN 或者 OSS,起初会很奏效,但是随着一些JS库的加入就没办法了,即使使用了 .min 版本,或者精简了类库代码,主包还会很大,这时候就会用到项目分包了。

阅读全文

记小程序flex布局垂直排列出现高度崩塌的问题

今天开发的小程序遇到了一个问题,在 iPhone8 iOS 12.2 的设备上访问出现了高度崩塌的问题,但是在其它的型号的 iOS 和 Android 设备上没有复现,
一开始以为是 微信版本 的问题,但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex 上,修改为 block 之后高度就不会崩塌了,但是元素的样式就没办法做了。

阅读全文

微信小程序学习日记 L07 eventChannel 页面事件通信通道

页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的DEMO

阅读全文

微信小程序学习日记 L06 组件插槽

小程序的插槽用法和 Vueslot 几乎一模一样,现在组件内需要的地方加入插槽(<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 就可以了。

阅读全文

微信小程序学习日记 L05 获取用户资料

在实际业务场景中,最常接触到的就是拉取微信登陆了,但单纯的一个点击按钮直接微信登录的需要获取多少微信权限呢?

最少的需要使用到1个微信开放接口:wx.login
如果需要获取用户头像和昵称,需要调用 wx.getUserProfile 方法 (wx.getUserInfo 已调整【尾声#1】),并且需要在绑定在按钮上 ,并会唤起授权提示;
如果需要获取用户手机号信息,需要在按钮上绑定 getPhoneNumber 事件。

一般来说非敏感信息可以直接调用,含有敏感信息的接口需要绑定在按钮上,在用户自行操作之后才可以调用。

阅读全文

微信小程序学习日记 L04 网络请求

在小程序中发送网络请求,需要使用微信提供的API,提供了5种:

  • 普通 HTTPS 请求(wx.request
  • 上传文件(wx.uploadFile
  • 下载文件(wx.downloadFile)
  • WebSocket 通信(wx.connectSocket
  • UDP 通信(wx.createUDPSocket

一般项目中使用频率最高的是 wx.requestwx.uploadFile

需要注意的是,小程序只可以跟指定的域名进行网络通信,需要事先设置通讯域名(服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置)。

可以查看 配置流程 了解一下具体注意项。

阅读全文

微信小程序学习日记 L03 生命周期

一开始按照 Vue 的思路下来,会认为生命周期很重要,需要完整的看一遍,但是其实整个小程序开发完之后,生命周期的概念其实并不是很重要,
大概分成 小程序 的生命周期 和 页面/组件 的生命周期。
这些生命周期函数中 主要就是使用 onShowonLoad 两个,用来获取和设置初始参数,发起请求等等。
其它的几个回调函数其实很少有用到,但是还是聊一聊吧。

阅读全文

微信小程序学习日记 L02 路由跳转

以前一直都是写的 Vue,所以在刚接触小程序的时候会疑惑,小程序是否也有和 Vue 一样有路由表,但是看完开放文档之后发现没有路由表,就很疑惑。
那小程序怎么去做页面跳转的呢?

首先,虽然小程序没有路由表,但是在全局配置文件(app.json)中有 pages 信息

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。

阅读全文