小程序开发入门

小程序开发入门

最近，开发了几个微信小程序。现在，列出了更重要的要点以供参考。在本文中，开发者服务器（以下简称服务器）。

项目结构

有关创建新项目的过程，请参考官方微信小程序网站。如果您已经完成了项目创建过程，那么您应该有一个像这样的目录。

[图像上载失败…（Image-d135ac-1528371907882）]

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

---------页码

-----第1页

----Page1.js（js代码在这里）

----Page1.wxml（页面布局）

----Page1.wxss（css文件）

-----第2页

......

---------Utils（此目录包含各种util方法）

---------app：。js（类似于Androidapp，它维护小程序app和globalData的生命周期）

---------app：。json（小程序页面的列表文件）

---------app：。wxss（全局样式）

---------项目配置。json（项目配置文件）

路由&；生命周期

小程序中的路由是由框架本身实现的，我们只需要简单地调用它。

路由选择方法

触发定时

预路由页面

发布路线页面

初始化

小程序打开第一页

加载，显示

打开新页面

wx。导航到或使用组件

打开隐藏

加载，显示

页面重定向

调用API wx RedirectTo或使用组件

打开卸载

加载，显示

页面返回

调用API wx NavigateBack或使用组件或者用户按下左上角的后退按钮

打开卸载

在Show上

重新启动

调用API wx ReLaunch或使用组件

打开卸载

加载，显示

选项卡切换

调用API wx SwitchTab或使用组件或用户切换选项卡

轻微地

轻微地

登录

登录

小程序登录如上图所示，分为以下两个步骤：

1.小程序调用wx。login（）获取临时登录凭证代码并将其返回给开发人员服务器。

2.服务器交换用户的唯一ID openid和会话密钥session_key的代码之后，开发人员服务器根据用户ID生成用户定义的登录状态，当前端和后端在后续业务逻辑中交互时，该登录状态用于标识用户身份。

因此，小程序登录的实现应如下：

app({

onLaunch:函数（）{

wx.登录({

成功：函数（res）{

如果（res.code）{

//发起网络请求（请求我们自己的服务器上传代码）

wx.请求({

url:'https://test.com/onLogin ',

数据：{

代码：res.code

}

})

}其他{

安慰日志（“登录失败！”+res.errMsg）

}

}

});

}

})

到目前为止，我们已经实现了一个简单的登录过程，但我们无法在每次进入小程序或每个页面时都登录，所以wx的时间安排。login（）调用非常重要。微信为我们提供了一种方法wx CheckSession用于检查用户的当前会话_密钥是否有效以及小程序是否需要再次登录。因此，相对完整的登录过程应如下：

wx.check会话({

成功：函数（）{

//session_密钥尚未过期，并且在此生命周期中始终有效

},

失败：函数（）{

//session_密钥已过期，您需要重新执行登录过程

wx。登录（）//再次登录

....

}

})

事件参数传输

例如，我们有一个按钮。单击按钮触发函数。我们需要向函数传递参数。我们能做什么？

测试</按钮>

Submit:函数（e）｛//在响应方法中，我们采用如下参数

console.log（e.target.dataset.name）

}

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

动画

通常，有两种实现动画的方法。第一个是使用wx。createAnimation（OBJECT）小程序提供的另一个动画API是使用画布绘制图片并通过setData更改值，以达到动画的目的。通常，我们采用第一种实现方法，不建议通过canvas实现，因为需要更频繁地调用setData，从而影响性能。

画布绘图

小程序定义了丰富的绘图方法，此处不再列出。还有两个更重要的问题需要提及。一个是save（），另一个是restore（）。举个例子：

const ctx=wx.createCanvasContext（“我的画布”）

//保存默认填充样式

ctx.save（）

ctx.setFillStyle（“红色”）

ctx。填充矩形（10、10、150、100）

//恢复到以前保存的状态

ctx.restore（）

ctx。填充矩形（50、50、150、100）

ctx.draw（）

操作结果如下：

save_恢复

如您所见，保存保存当前图形上下文的状态，恢复用于恢复到以前保存的状态。

优化

优化工具

1.微信