Mini计划开发的入门最近已经开发了几个微信迷你计划。现在，我将列出更重要的参考点。在文章中，开发人员服务器（以下简称为：服务器）。简要使用了在项目结构中构建新项目的过程，请参阅微信Mini计划的官方网站。假设您现在已经完成了项目创建过程，那么您面前的目录应该是这样的目录。

[图像上传失败...（ - 82）]

如上图所示，我们看到的目录结构大致如下：

---------pages（各个页面的目录） -----pages1（页面一） ----page1.js(js代码在这) ----page1.wxml（页面布局） ----page1.wxss（css文件） -----pages2(页面二) ...... ---------utils（此目录包含各种util方法） ---------app.js（类似于Android的Application，维护着小程序App的生命周期以及globalData） ---------app.json（小程序Pages的清单文件） ---------app.wxss（全局样式） ---------project.config.json（项目配置文件）

路由&& 均由框架本身实现，我们只需要简单地调用它们即可。路由方法触发路由页面后路由页面之前的时间

初始化

小程序打开第一页

，，，，

打开一个新页面

WX。或使用组件

，，，，

页面重定向

致电API WX。或使用组件

，，，，

页面返回

致电API WX。或使用组件或用户按左上角的返回按钮

重新启动

致电API WX。或使用组件

，，，，

选项卡开关

致电API WX。或使用组件或用户切换选项卡

轻微地

轻微地

登录

<=“”>

登录

迷你程序的登录显示在上图中，该图分为以下两个步骤：

1. 小程序调用wx.login()获取临时登录凭证code，并回传到开发者服务器。 2. 服务端以code换取用户唯一标识openid和会话密钥session_key。之后开发者服务器根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

因此，Mini计划登录的实施应该是这样的：

App({ onLaunch: function() { wx.login({ success: function(res) { if (res.code) { //发起网络请求（请求我们自己的服务器，将code上传） wx.request({ url: 'https://test.com/onLogin', data: { code: res.code } }) } else { console.log('登录失败！' + res.errMsg) } } }); } })

在这一点上，实现了一个简单的登录过程，但是我们每次输入Mini程序或输入每个页面时都无法登录，因此WX的时机。（）调用非常重要。微信为我们提供了一种方法。要检查用户当前是否有效，并确定小程序是否需要再次登录。因此，相对完成的登录过程应该是这样的：

wx.checkSession({ success: function(){ //session_key 未过期，并且在本生命周期一直有效 }, fail: function(){ // session_key 已经失效，需要重新执行登录流程 wx.login() //重新登录 .... } })

例如，事件传输，我们有一个按钮。单击按钮会触发功能。我们需要将功能传递给消息。我们该怎么做？

测试 submit: function(e){ //在响应方法里我们这么取参数 console.log(e.target.dataset.name) }

总而言之，数据 - {}用于传递相关参数。

通常有两种实现动画的方法。首先是使用WX。（）Mini程序提供的动画API，另一个是使用绘图表格更改值以实现动画的目的。通常，我们采用第一个实施方法，不建议通过使用方法，因为它需要更频繁的呼叫，这将对性能产生影响。图形小程序定义了一种丰富的图形方法，因此我不会在此处列出它们。还有两个重要的提及。一个是保存（），另一个是（）。让我们看一下这个示例：

const ctx = wx.createCanvasContext('myCanvas')

// save the default fill style ctx.save() ctx.setFillStyle('red') ctx.fillRect(10, 10, 150, 100) // restore to the previous saved state ctx.restore() ctx.fillRect(50, 50, 150, 100) ctx.draw()

操作结果如下：

<=“”>

您可以看到保存保存当前图形上下文的状态，并用于还原到先前保存的状态。

优化和优化工具1。微信提供了一个性能面板，我们可以用来了解Mini程序的当前性能。 2。平台可以使用性能工具进行分析，请参阅官方网站以获取特定的操作步骤。

优化建议1。这是Mini程序开发中最常使用的界面，也是最有可能引起性能问题的接口（这就是为什么不建议使用动画 +）的界面。因此，在使用时，您应该注意：1。避免频繁使用。避免每次传递大量新数据。 3。避免执行两个背景页面。避免使用大图三。上传图片时，请注意压缩和传输图片。避免使用原始图像4。使用微信缓存时，及时清理缓存的数据。 wx。（）5。及时清理不再使用的代码，库和图像资源。 6。避免使用具有极高相似性的图片。例如，例如：左右的箭头，我们可以使用两个图像资源来引用一个图像资源，然后使用CSS来控制显示。要注意的要点：1。组件是客户创建的本机组件。它们具有最高水平，无法通过Z级控制。您应该使用-View来覆盖本机组件上的文本视图。除了映射，实时和实时外，可以覆盖的本机组件还包括映射，live-和live-，仅支持嵌套-View和 - 。示例如下：

2。迷你程序页面的数据传输方法。 key1 =＆key2 = ....传递json字符串时，您不能这样做，因为json包含它？解析会有错误。因此，可以借助Mini程序缓存来实现。例如，第A页---> b：

A页面： let data = JSON.stringify(params) //保存数据到本地缓存 B页面： //取出缓存数据 JSON.parse(data)

2.Oios滑倒

-webkit-overflow-scrolling: touch;

过去获取有关微信的用户信息，当我们输入迷你程序时，将出现一个弹出框，类似于以下方式：

[图像上传失败...（ - 82）]

wx.getUserInfo(OBJECT) //通过这个方法，我们可以唤起弹框，用于获取用户信息

此接口已调整。使用此接口将不再具有授权弹出窗口。请使用指南用户主动执行授权操作。如果使用，将出现以下提示：

[图像上传失败...（ - 82）]

但是，此界面并未放弃。当用户未授权时，调用接口将直接报告错误。用户授权后，您可以使用此接口获取用户信息。在这一点上，几乎引入了迷你程序，至少它具有简单的感知。我避免引入迷你程序的各种组件或API。我可以大致浏览这些组件和API，知道系统提供的内容，然后在使用时检查它。