Skip to main content

微信小程序开发-准备工作

知识储备​

你需要具备的基础能力

这不是0基础教程，你需要首先具备html、css和一些JavaScript知识

小程序是什么​

微信是中国使用量最大的手机 App 之一，市场极大。2017年，微信正式推出了小程序，允许外部开发者在微信内部运行自己的代码，开展业务，截止2020年6月，小程序数量已经超过了550万个。
小程序可以视为只能用微信打开和浏览的网站。 小程序和网页的技术架构是几乎一样的，用到的 JavaScript脚本语言和 CSS 样式表也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以，小程序页面本质上就是网页。

小程序和h5的区别​

​网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

tip

总结来说，小程序和WEB开发在语言上相通，但是内核不相通。

注册微信小程序​

前往微信公众平台，注册小程序。
点击“小程序”进入注册。
1654647638272.png
填写一个尚未在公众平台注册过的邮箱，完成如下设置后，点击注册。
image.png
此时，腾讯会给你的这个邮箱发一条验证码，点击链接验证即可。
image.png
填写主体信息，选择“个人”。
image.png
填写管理员信息，进行身份验证（很快！）
image.png
您也可以用已经存在的公众号注册小程序
完成注册后，进入管理界面。 点击设置，拉到最下边，获取AppID（重要）并记录下来。
1654648210458.png
1654648266364.png
在基本设置中完善小程序信息，类别随意选择。

caution

您不需要进行微信验证，这是花钱的。是商业性App需要的东西。

进入微信开发工具下载界面下载微信开发工具。选择Stable版即可。
不出意外的话，您的电脑应该是64位。

🔔

建议不要安装在C盘。

安装完成后，打开。
image.png

添加开发者​

在微信小程序管理平台上，选择添加协同开发者。
1656488604399.png
为所有人添加权限。
image.png

创建小程序​

如图，打开微信开发者工具，新建一个小程序，确定好小程序的工程名、路径，填写刚刚记录下来的AppID，后端服务不用管，一般刚注册时是没有云开发的。选择下面的空白模板。
image.png
注意，一定要使用空白模板！
image.png
如下，工程就建立好了：
image.png

小程序的结构​

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.js : 小程序逻辑
app.json : 小程序公共配置
app.wxss : 小程序公共样式表，所有的页面都要遵循这个里面的css配置

一个小程序页面由四个文件组成，分别是：

js :页面逻辑
wxml :页面结构
json :页面配置
wxss :页面样式表

微信开发IDE界面​

1656486090139.png

Hello World​

新建页面​

下面将通过实际操作，帮助你写一个Hello World Demo！
先在Pages文件夹上右键-新建文件夹。
image.png
然后在这个文件夹上新建页面，命名为Hello World。
1656485390575.jpg
image.png
如此，系统就自动生成了一个页面的四个必须文件。
1656485523918.jpg

将页面设置为主页​

找到app.json。
1656485625116.png
app.json的pages配置项集合的第一条就是默认的主页。
我们把刚刚自动生成的helloworld页面配置移到最前面。
1656485765307.png
注意，配置项的最后一条末尾必须没有逗号。
按住ctrl+s，保存工程，自动编译，左边的模拟器就会将刚刚设置的页面渲染出来。

编写wxml代码​

删掉原有的代码。将右边的编辑区清空。
image.png
让我们把原有的div想象成view，编写下面的嵌套盒子。 

<view>
  <p>Hello World!</p>
</view>

Ctrl+s保存，在左边的渲染器中可以看到新写的代码。
image.png

编写wxss代码​

简单的代码wxml代码似乎有点空洞，那我们开始写css（wxss）吧！
修改wxml代码，为盒子添加class类。 

<view class="text_box">
  <p class="p1">Hello World!</p>
</view>

打开helloworld.wxss文件，编写样式代码。 

.text_box{
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  margin-top: 100rpx;
}
.p1{
  font-size: 70rpx;
  color: aqua;
}

image.png
保存文件之后左边的模拟器刷新渲染，可以看到新的样式。

注意单位rpx

为了更好的适配不同的屏幕大小，所以小程序使用相对单位 rpx ，小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此，无论在iPhone13pro上还是iPhone 13 Mini上都是如此。1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px。在后面的开发中，请广泛使用rpx。

到这里，准备操作就做完了。