微信小程序入门

WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。

WhatsApp 免墙、翻译、多开、号码抓取、群发【99元/年】

微信公众平台账号类型目前分为4类(订阅号、服务号、小程序、企业微信)。

选择小程序之后,填写邮箱和密码,这里邮箱需要填写未注册,未绑定过开放平台、订阅号、服务号、企业微信的邮箱。

企业类型账号可选择两种主体验证方式。方式一:需要用该对公账户向腾讯公司进行打款来验证主体身份。打款信息在提交主体信息后最后一步可以看到。方式二:微信注册并认证,无需小额打款验证,需支付300元审核费用。提交认证后会在1~5个工作日完成审核。在认证完成前小程序部分功能暂不支持。

选择微信认证验证主体身份的用户,完成注册流程后需要尽快进行微信认证,认证完成之前部分功能暂不可使用。选择对公打款的用户,可以根据页面提示,向指定的收款账号汇入指定金额。需要在10天内完成汇款,否则将注册失败。

微信认证之后,可以通过“首页”小程序发布流程下面的“小程序信息”来完善小程序信息。

已认证的小程序可以最多绑定20个开发者。未认证的小程序可以最多绑定10个开发

只有管理员和绑定的开发者才有权限在手机上体验该AppID的小程序。

个人没有注册微信小程序账号的,可以通过已有的订阅号(或新注册订阅号)来开发小程序。

MINA 的核心是一个响应的数据绑定系统。整个系统分为两块:视图层(View,描述语言 WXML和 WXSS)和逻辑层(App Service,基于 JavaScript)。这可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

项目创建好之后,包含了小程序的主体部分,由 3个文件组成,必须同时放在项目的根目录下,3个代码文件是 app.js、app.json、app.wxss。其中,.js 后缀的是脚本文件,小程序逻辑层;.json后缀的文件是配置文件,负责小程序公共设置;.wxss后缀的是小程序的公共样式表文件。微信小程序会读取这些文件,并生成小程序实例。

可以在 app.js 文件中监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的API,如本例的同步存储及同步读取本地数据。 可以在app.json文件中配置小程序是由哪些页面组成,配置小程序的窗口、背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。 app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用。 pages 目录用于存储小程序的框架页面,一个页面是一个目录,目录下有 index(首页,欢迎页)和logs(信息页,小程序启动日志的展示页)两个页面。单击首页的头像会跳转到信息页,在信息页单击“返回”,可以退回到首页。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。 一个框架页面由是由同路径下同名的 4个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

添加文件需要注意一个原则:为了方便开发者减少配置项,微信规定描述页面的这 4个文件必须具有相同的路径与文件名。

调试功能分为 8 页功能模块:Console、Sources、Network、Storage、Appdata、Wxml、Sensor、Trace和最右侧更多按钮“”,下面将逐个介绍每一页功能。

ES6转ES5:微信小程序运行在三端:iOS、Android 和用于调试的开发者工具,三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:
 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView来渲染的,环境有 iOS8、iOS9、iOS10。
 在Android上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由X5基于 Mobile Chrome 37 内核来渲染的。
 在开发工具上,小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的。
虽然三端的环境是十分相似的,但是至少目前还是有一些区别的: ES6 语法支持不一致,语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。微信在0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者代码ES6语法转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。 ES6 API 支持不一致,考虑到代码包大小的限制,API 上目前需要开发者自行引入相关的类库来进行处理,例如 Promise 需要开发者自行引入 Polyfill 或者别的类库。wxss 渲染表现不一致,尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在 iOS 和 Android 上检查小程序的真实表现。

小程序的优点: 1.无需下载安装,无需注册,即开即用,用完就走,不占用手机内存,省流量,省安装时间; 2.打开速度比H5还快,体验上接近原生App; 3.跨越安卓和苹果平台,开发成本比 App 低,可以将更多财力、人力、精力放在产品运营和内容本身; 4.安卓手机可以直接添加手机桌面,看上去和App差不多; 5.相较于各种App,微信小程序UI和操作流程会更统一,降低了用户的使用难度; 6.相较于原生App,推广更简单,更省成本。 小程序的缺点: 1.只能分享给群、朋友,不能分享到朋友圈; 2.二维码长按识别之后不能直接进入小程序,只能通过微信扫一扫才能进入到小程序; 3.没有推送(push)功能,不能给用户推送消息; 4.所能获取的用户数据非常有限,基本就是头像、昵称等,没有用户体系; 5.不需要注册,用完即走,没办法多任务处理; 6.不能做游戏; 7.小而美,做垂直,功能复杂度有限制。

1)小程序不适用于高频、刚需的需求场景,该场景下应采用原生App,不适合采用小程序。
2)作为增量渠道,为原生 App 进行导流。对于高频、非刚需的使用场景,采用的产品形态视情况而定,小程序主要适用于:
 偏工具的内容型产品
 日常工具类产品
 社区类产品(作为导流作用)
 创业者进行MVP产品形式的探索
3)初创企业进行产品模式的探索。
4)对于低频、非刚需需求,基本是属于小众的需求,一般有两种情况: 开发者自身兴趣 / 专业级产品,面向某领域专业用户。 对于第一种情况,就看开发者本身的能力,如果你是移动端开发者,那就开发原生 App;如果你是前端,就开发小程序。 对于第二种情况,由于专业级产品一般对于性能和交互体验较高,所以优先采用原生App。
5)基本涵盖所有低频、刚需的长尾生活服务需求场景。

小程序开发使用的框架叫 MINA 框架,通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套的 JavaScript Api,目标是通过尽可能简单、高效的方式让开发者快速构建应用,并具有原生App体验的服务。 框架的核心是一个响应的数据绑定系统。整个系统分为视图层(View)和逻辑层(App Service)两块。 逻辑层由js完成,视图层由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)基于 JavaScript 的文件来完成。在视图层与逻辑层间提供了数据传输和事件系统,让开发者可以方便地聚焦于数据与逻辑上,让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

MINA 框架管理了整个小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中,其他的一切复杂的操作都交由框架处理。 MINA 框架提供了一套基础的组件,这些组件自带微信风栺的样式以及特殊的逻辑,开发者可以通过组合基础组件,创建出强大的微信小程序。 MINA 框架提供丰富的微信原生 API,可以方便地调起微信提供的能力,如获取用户信息、本地存储、支付功能等。 基于以上优化设计,MINA框架对Android端和iOS端做出了高度一致的呈现。

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。对微信小程序来说,逻辑层就是所有的.js文件的集合。js文件是由JavaScript编写,在JavaScript 的基础上,微信增加和修改了以下特性:
 增加 App 和 Page 方法,进行程序和页面的注册。
 增加 getApp 和 getCurrentPages 方法,用来获取 App 实例和当前页面。
 提供丰富的 API,如微信用户数据、扫一扫、支付等微信特有功能。
 每个页面有独立的作用域,并提供模块化能力。 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中一些能力是无法使用,如 document、window 等。

微信小程序也有生命周期,小程序中是通过 app.js 来管理小程序的生命周期,同样小程序的页面Pager也拥有自己的生命周期。 App()函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。App()必须在 app.js 中注册,且不能注册多个。所以App()方法在一个小程序中有且仅有一个。

点击左上角关闭,或者按设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,小程序会从后台进入前台。只有当小程序进入后台一段时间,或者系统资源占用过高,才会被真正的销毁。

在页面的 js 文件中,会看到小程序中另外一个重要的对象 Page,Page()函数用来注册一个页面。接受一个 object 参数,用来实现页面的初始数据、生命周期函数、事件处理函数等。

初始化数据将作为页面的第一次渲染显示内容。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的栺式:字符串、数字、布尔值、对象、数组。渲染层可以通过 WXML 对数据进行绑定。

生命周期函数:
1. onLoad:页面加载,一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
2. onShow:页面显示,每次打开页面都会调用一次。
3. onReady:页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置(如wx.setNavigationBarTitle)请在onReady之后设置。
4. onHide:页面隐藏,当navigateTo或底部tab切换时调用。
5. onUnload:页面卸载,当redirectTo或navigateBack的时候调用。

MINA的视图层由WXML(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写。由组件显示内容。MINA将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
 WXML用于描述页面的结构,框架设计的一套标签语言;
 WXSS用于描述页面的样式;
 组件(Component)是视图的基本组成单元;
也就是说 WXML 的通过各种组件来展现内容,WXSS 提供页面 css 样式。WXML 所使用绑定的数据,来自页面对应的js文件中Page方法中的data对象。

数据层主要包括:本地数据操作、本地存储、文件操作、网络数据请求和调用。

本地数据操作,主要是指页面临时数据或缓存,在 Page()中,要使用 setData 函数将数据从逻辑层发送到视图层进行显示,同时改变对应的 this.data 中的值。

不能直接修改 this.data,修改之后视图层无法刷新显示。另外微信规定单次设置的数据不能超过1024KB。

框架提供丰富的微信原生API,可以方便地调起微信提供的功能,如获取用户信息、本地存储、支付功能等。

API分为:网络 API、媒体API、数据API、位置API、设备API、界面API、开放接口。

微信给每个小程序分配了 10M 的存储空间,对这个缓存的操作,其实跟 H5 的 localStorage 操作是一样的。

微信提供了一个接口用来发起请求:wx.request。而且它发起的请求,只能是 https 请求,且一个微信小程序,同时只能有 5个网络请求连接。进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。 普通HTTPS请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile)、WebSocket通信(wx.connectSocket)、上传或下载文件API接口。

微信小程序通过navigateTo或者redirectTo实现连接跳转时的参数传值。

WXML(WeiXin Markup Language)是微信的一套标签语言(类似 HTML),结合基础组件、事件系统,可以构建出页面的结构。在项目中以.wxml文件呈现。

WXSS(WeiXin Style Sheets)是MINA框架设计的一套样式语言,用于描述WXML的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,微信 WXSS 具有CSS 大部分特性。同时为了更适合开发微信小程序,微信对 CSS 进行了扩充以及修改。与 CSS 相比扩展的特性有:尺寸单位、样式导入。 尺寸单位 WXSS拥有针对屏幕的两种尺寸单位:rpx、rem。 rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。

rem(root em):规定屏幕宽度为20rem;1rem=(750/20)rpx。因此建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。1rem=(750/20)rpx。

为了保护小程序应用安全,微信官方的需求文档要求,每个小程序必须事先设置一个通信域名,并通过 HTTPS 请求进行网络通信,不满足条件的域名和协议无法请求,

测试完毕之后,确认没问题,就可以点击 “上传”按钮,上传到微信后台,这里也只有管理员才能进行操作。

登录微信小程序的后台,在提交审核之前需要先确定完成以下几步。 (1)微信认证企业类型请先通过微信认证完成主体真实性确认。否则将无法发布小程序。 (2)补充小程序的基本信息,如名称、图标、描述等。 (3)小程序开发与管理,可以添加开发者,配置小程序服务器域名等信息。 (4)前往发布,提交审核。

为了用户可以快速搜索出小程序,在这里可以填写一些重要的页面的类目与标签,最多添加 5 组。

用户在第一次打开小程序时,首先要先下载小程序所有资源,下载成功之后,即可在微信中使用。每次启动小程序时,首先与服务器版本进行对比,如果有最新版,则继续下载最新版资源,如果没有最新版,则直接使用本地资源运行。

用户在第一次打开小程序时,首先要先下载小程序所有资源,下载成功之后,即可在微信中使用。每次启动小程序时,首先与服务器版本进行对比,如果有最新版,则继续下载最新版资源,如果没有最新版,则直接使用本地资源运行。 第三章 框架组件 MINA 框架提供了一系列基础组件,通过组合这些基础组件进行快速开发。

开发 API 主要包括调用微信登录、授权、获取用户登录信息、使用微信支付、模板消息、客服消息、转发分享、获取二维码、收货地址、卡卷、设置、微信运动、打开小程序。

wx.login(OBJECT):调用接口获取登录凭证(code),进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)。用户数据的加密、解密通信需要依赖会话密钥完成。

wx.checkSession(OBJECT):通过上述接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序,用户登录态越有可能失效。反之如果用户一直在使用小程序,则用户登录态一直保持有效。具体时效逻辑由微信维护,对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。

通过 wx.login()获取到用户登录态之后,需要维护登录态。开发者要注意不应该直接把session_key、openid 等字段作为用户的标识或者session的标识,而应该自己派发一个 session登录态。对于开发者自己生成的session,应该保证其安全性且不应该设置较长的过期时间。session 派发到小程序客户端之后,可将其存储在 storage,用于后续通信使用。

UnionID机制说明: 如果开发者拥有多个移动应用、网站应用和公众账号(包括小程序),可通过 unionid 来区分用户的唯一性,因为只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

可以高效触达用户的模板:基于微信的通知渠道,微信开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验。 模板推送位置:服务通知。 模板下发条件:用户本人在微信体系内与页面有交互行为后触发。 模板跳转能力:点击查看详情仅能跳转下发模板的该账号的各个页面。

2019年7月,微信官宣,近期将上线「一次性订阅消息」这一小程序新能力。一次性订阅消息,顾名思义,就是小程序可向用户推送一次消息。但我们所熟知的小程序模板消息,似乎也能做到这一点。那么,这二者,有什么区别?

模板消息,是小程序触达用户的一个重要入口,它基于用户的主动行为被触发。用户在小程序内完成特定交互行为(主要是支付)后,小程序可在后续7天内向用户推送1-3条模板消息。

模板消息内含小程序入口,且能够搭载优惠券、促销活动等营销信息,能够帮助商家大大提高运营能力。但是模板消息也有其局限性。

首先,模板消息虽然是由用户的行为触发,但实际上用户是被动接受者,事先对推送内容并不知情。由于用户事先没有选择权,所以贸然推送的消息很有可能对用户构成骚扰,起到反效果。尽管推送次数有限,不至于形成“轰炸骚扰”,但是依然有可能造成负面的用户体验。

其次,模板消息推送的时间限制过于严格,只有7天。对模板消息推送时效设限,在预防过度营销、优化用户体验等方面,有其合理性。但对于一些服务周期较长的小程序来说,7天的限制使得它们无法提供完整的服务。

一次性订阅消息能做什么?能够让用户像关注公众号一样,自主按需订阅通知提醒,是「一次性订阅消息」一大亮点。很多时候,“服务”与“骚扰”之间,只隔着一层很薄的“窗户纸”。同一条推送,愿意看的用户,认为这是服务周到的体现;而没兴趣的用户,收到提醒之后只想拒收。
在信息爆炸的当下,正确的营销策略,并非一厢情愿地给用户推送“想让他看的”,而是有选择性的给用户提供内容,给他看“他想看的”。用微信官方的说法,这就是所谓的该收到的用户收到消息,让不该收到的用户不收到。

「一次性订阅消息」上线之后,这种“一厢情愿”的营销方式有望得到改善。商户可以在小程序内对用户进行“订阅引导”,了解用户真正的兴趣点,确保下一次通知推送给用户的消息能够吸引对方回到小程序中,从而真正做到“不浪费”每一次触达用户的机会。

此外,模板消息的另一个局限性,就是推送的有效期只有7天。对于类似机票、保险等特殊行业的小程序,7天根本不够用:7天内,找不到合理的推送节点;7天之后,已经丧失了推送机会。

「一次性订阅消息」没有时效限制。在经过用户的明确授权之后,商家小程序可以在任意时间给用户推送一条订阅消息,“航班延误提醒”等功能也因此有了用武之地。更宽松的时效限制、辅以合适的推送内容,这使得一次性订阅消息有望在召回“沉睡用户”、提高小程序留存转化方面发挥巨大作用。

页面组件讲过 contact-button 组件,客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。当用户在客服会话发送消息(或进行某些特定的用户操作引发的事件推送时),微信服务器会将消息(或事件)的数据包(JSON 或者 XML 栺式)POST 请求开发者填写的URL。开发者收到请求后可以使用发送客服消息接口进行异步回复。

当用户和小程序客服产生特定动作的交互时(具体动作列表请见下方说明),微信将会把消息数据推送给开发者,开发者可以在一段时间内(目前修改为48小时)调用客服接口,通过POST一个JSON数据包来发送消息给普通用户。此接口主要用于客服等有人工消息处理环节的功能,方便开发者为用户提供更加优质的服务。

通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面。

微信扫一扫 或 点击链接加好友

仍有疑问,点击 链接,加个 微信 好友,一起交流。

发表评论