1.在开发微信小程序之前，我们必须首先知道小程序是什么以及优点。

我在Zhihu上看到的回复：/ question / 50880960

2.开始查看小程序的开发文档，互联网上有很多教程，但是官方文档更加全面。

附上官方文档地址：/debug/wxadoc/dev/quickstart/basic/getting-started.html

安装步骤等均在官方文档中。

3.小程序阅读文档之后，让我们开始使用wxml wxs wxss构建一个简单的界面。

事实上，微信小程序与html + css + js有很多相似之处，除了标签不相同之外，它们似乎是相似的。

4.仅构建了几个接口，发现该代码不符合微信小程序的目的：逻辑和渲染分离。

例如，一个简单的模块：

充值10元

充值10元

充值10元

充值10元

如果编写纯HTML，则可能不得不多次复制此行代码。

如果您用小程序书写，则只需要：

{{item}}

您可以循环出相同的代码行。

小程序实际战斗经验摘要：

1、小程序图片标签选择大图片时，图片会失真

原因是小程序的图片标签的带宽更高，为320 * 240

您需要设置mode =“ widthFix”才能更改原始图像的宽度和高度。

当2、文本需要换行\ n或占位符＆nbsp时，您必须使用text标签，否则它将无效。

要使用＆nbsp＆lt之类的符号，您需要在文本标签中设置解码=“ {{ture}}”。

3、小程序进行嵌套循环时，数据不便放入数据

解决方案：将需要循环的模块放入模板中，并将模板中的数据设置为变量。

调用模板时，请在调用时将变量替换为要在数据中调用的数组或字符串。

4、微信小程序不支持将背景用作图片。

解决方法：直接使用image标签，并将src设置为网络图片。如果需要制作背景，请在图像标签上添加一个子标签，并在其中设置绝对位置。

在此行中设置相对于图像的绝对位置，以实现背景图像效果

5、设置全局变量属性

在小程序中，变量通常放置在每个文件夹的js中。有时，当所有页面都使用某些数据时，一一声明是很麻烦的，因此定义一个全局变量。

首先，将所需数据放入最外层app.js中的globalData中。

例如：globalData：{

userInfo：null，

url：“ /”，

}

在您需要调用的页面文件夹中的js文件中。

在第一行中添加const app = getApp（）；

然后定义一个变量并将数据放入该变量

例如：

数据：{

//获取官方网站地址

地址：app.globalData.url，

}

最后，该地址可以在页面上使用。

6、小程序呈现列表wx：key问题

小程序列表渲染使用wx：for =“ {{循环参数}}”

如果未添加wx：key =“ parameter”，则调试工具中将出现黄色警告消息。但这不会影响页面。

在网上找到原因