本文主要是利用微信小程序开发者工具,编写一个小程序实现点击一个按钮显示helloworld。
首先进行工具的下载以及账号的注册,然后开发简单的小程序,最后将写好的小程序生成二维码送至手机进行预览。
一. 工具下载与使用
- 首先在微信公众平台官网注册一个账号,然后在开发界面选择下载,如图所示。
然后根据自身情况选择对应的版本,这里我选择的是开发版win64。下载安装之后得到开发工具。第一次运行微信扫描登录,然后选择新建项目得到如图所示界面。
项目名称应与目录一致,这里我的项目名称为helloworld。APPID可以自己注册申请,也可以使用测试号,点击新建进入自己的小程序项目开发界面。如图所示为我的helloworld小程序开发界面。
二. 小程序开发
- 进入开发界面后首先得到的是一个简单的完整的小程序,可以实现点击按钮显示当前登录微信的头像和昵称。如下图所示,固定的两个文件夹和几个app文件,其中pages文件夹包括了小程序的所有界面,每一个界面单独一个文件夹,例如显示helloworld信息的hello文件夹,以及首页带有按钮的index文件夹,其中hello文件夹为自己添加,index文件夹和logs文件夹是本来就有的。app文件是整个小程序的公共文件。注意只要在pages中添加了新的文件夹,就要在app.json中进行声明。
- 在每个文件夹中,都含有如下图所示的四个文件,其中js文件包含了当前界面的所有事件点击响应函数;json文件包含当前界面的配置,个人理解就是整体布局;wxml文件为当前界面的结构文件,例如添加按钮,显示文本信息等都在该文件设置;wxss文件为当前界面的样式表,可以在页面组件的 class 属性上直接使用其声明的样式规则。
3.自己的小程序开发
首先在index.wxml中添加一个按钮,如下图所示。
在index.js文件中添加jump函数以跳转至hello界面显示信息,如下图所示。
注意在这之前需要先在pages文件夹下添加一个文件夹,命名为hello,然后在该文件夹下添加那四个文件。并在app.json文件中进行声明,如下图所示。
在当前功能中hello.js没有什么用,但还是需要把固定的东西加上去,如图所示,page是js文件中固定的方法,data为该界面所涉及到的所有变量信息。
hello.json文件内容如下图所示,这次也没什么用。
hello.wxml文件中为当前页面显示的信息,如下图所示。
hello.wxss为界面显示信息的格式,如下图所示。
三. 手机预览
如果仅仅是自己手机预览,则可以通过测试号的APPID生成二维码预览,但是如果需要给其他微信号看,则需要自己申请注册APPID,然后修改自己项目的APPID。在保证自己微信号为管理员的前提下,在微信公众平台官网的成员管理中添加项目成员,则可以进行小程序的预览。然后点击开发工具中预览生成二维码即可分享,如下图所示。
具体效果如下图所示。