很多Java同学问微信小程序怎么开发,怎么创建小程序项目,和普通网页有什么区别。嗯~~,我还是觉得有必要给后台开发者写个微信小程序教程。教程的重点是小程序的搭建和快速开发,以及如何连接Java后台,没有详细的样式效果处理,减少不必要的信息量,但是看过本课程的同学最好html和js基础。
首先给同学们简单解释一下微信公众号和微信小程序的区别。虽然两者都附属于微信应用,但定位不同。
一.注册微信小程序
公众号和小程序都可以单独注册,但是大部分真实操作都需要经过认证才能使用高级功能。认证费为每年300元。如果有认证公众号,可以在公众号后台使用公众号。用认证信息快速注册小程序,免费获得认证,方便又好用。
如果没有公众号,可以在这个地址单独注册小程序:
如果只是想体验小程序开发,不做实际操作使用,不需要注册官方小程序,因为微信官方提供了开发测试的测试号,方便开发者开发和测试能力。体验小程序,真机预览体验。
考号申请地址:
%2F沙盒
申请测试号的过程非常简单。只需访问申请地址并扫描二维码登录即可查看已分配给您的测试账号信息。
二.下载开发工具
开发微信小程序,必须下载官方开发工具编译,否则看不到效果。
下载链接:
工具使用手册:
三.创建小程序项目
打开工具,选择小程序项目,新建一个项目。
点击考号,工具会自动填写你考号的信息。当然,如果你注册了官方小程序,登录小程序后台找到AppID,复制进去。
图像.png
点击New按钮,项目创建成功,可以看到自己的头像和昵称,这是HelloWorld官方页面。
图像.png
四.项目文件结构介绍
图像.png
上图是项目创建后我们可以看到的项目文件结构。在继续开发之前,让我们一起来看看它。
小明:那怎么能算是小程序的一页呢?
答:其实index和logs名字的文件夹并不是一个页面。真实页面由4个同名但类型不同(js、json、wxml、wxss)的文件组成。该文件夹的作用只是方便分类管理。像下图,pages下也存了2个page,这是真的,不过我问你,丑不丑?将来如何处理更多页面?
图像.png
一个小程序页面由四个文件组成,分别是:
需要的文件类型
js(相当于之前的js文件)
是的
页面逻辑
wxml(相当于以前的html文件)
是的
页面结构
wxss(相当于之前的css文件)
不
页面样式表
json
不
页面配置
一个小程序的主体部分由三个文件组成,必须放在项目的根目录下开发微信小程序,如下:
需要文件
应用程序.js
是的
小程序逻辑
应用程序.json
是的
小程序公开配置
应用程序.wxss
不
小程序公共样式表
小明:文件这么多,这些文件都必须存在吗?
答:当然不是。这是官方的 HelloWorld 项目。目的是为每个人构建项目结构。有些文件是可以删除的,比如pages中的两页。我们自己做的小程序,一定是自己构建页面,但是如果你不确定哪些文件必须存在,哪些文件可以删除,那就别动了,等你多写几个函数熟悉一下用它。
五.创建小程序页面
打开app.json文件,可以看到有一个pages属性,用来指定小程序由哪些页面组成,每一项对应一个页面的路径(包括文件名)信息。文件名不需要写文件后缀,框架会自动查找.json、.js、.wxml、.wxss这四个文件为位置进行处理。比如图中的页面配置了两个页面,分别是前面提到的索引页面和日志页面。每次我们新建一个页面,都必须在这里进行配置开发微信小程序,才能正常使用。
图像.png
数组的第一项代表小程序的初始页面(主页)。要在小程序中添加/删除页面,您需要修改 pages 数组。
现在让我们创建一个新页面~
我们用最快的方法直接修改app.json文件,在里面的pages中添加“pages/hello/hello”,代表页面的路径,按ctrl+s保存,开发工具会自动生成相关文件。
具体效果如下:
图像.png
这样,我们自己的小程序页面就创建成功了!
六.修改页面显示的内容
如前所述 支付宝小程序开发 ,小程序的每个页面由 4 个文件(wxml、wxss、js、json)组成。
现在我们要修改页面显示内容 小程序开发制作 ,首先是修改wxml文件(相当于网页开发中的html文件)。
打开hello.wxml文件可以看到如下
pages/hello/hello.wxml
改之前先简单了解一下wxml的标签开发微信小程序,注意:这个和html不同,不要在里面写html标签。
但是,我们可以打个比方:
小程序 1
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网