微信小程序学习总结（1）

红太狼 2022-01-23 10:01 668阅读 0赞

# 微信小程序学习总结（1） #

## 一、注册微信小程序 ##

访问[https://mp.weixin.qq.com/][https_mp.weixin.qq.com] ，点击“立即注册”

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]

选择“小程序”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]

然后点击“链接地址”激活账号即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]  
然后进行“主体信息登记”

![format_png][]  
然后再填写小程序的一些基本信息，即可

## 二、下载微信开发者工具 ##

点击“文档”  
![在这里插入图片描述][20200110090521989.png]

然后按下面的图示点击  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]

我这里选择“稳定版”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]

## 三、打开微信开发者工具，新建一个项目 ##

其他的选默认的即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 7]

#### 小程序的代码结构如下： ####

1.首先有2个文件夹，pages和utils,pages里面主要存放一些页面相关的信息,utils文件夹里面存储一些公用的代码

2.有4个全局配置文件，app.js app.json app.wxss project.config.json

app.js的作用是帮我们注册一个微信小程序

app.json是配置文件

(**解释：.wxml文件就类似于我们前端的html语言，wxss就类似于css样式**)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 8]

在此之前先讲一下开发语法

##### 例1： #####

新建一个index.wxml (.wxml文件就类似于我们的html文件的作用一样)  
![在这里插入图片描述][20200110091004676.png]  
新建一个index.js文件  
![在这里插入图片描述][20200110091050646.png]

页面显示效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 9]

##### 例2： 数据绑定 #####

index.wxml:  
![在这里插入图片描述][20200110091201122.png]  
 index.js: 给theName这个变量赋值

![在这里插入图片描述][2020011009133471.png]

页面显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 10]

##### 例3：列表渲染 #####

index.wxml:  
![在这里插入图片描述][202001100916064.png]

index.js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 11]

页面展示效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 12]

##### 例4：条件渲染 #####

index.wxml： 类似于程序设计里面的if ，else  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 13]

index.js:  
![在这里插入图片描述][20200110094951884.png]

页面展示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 14]

例5：模板引用

index.wxml:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 15]

小疑问：下面的data属性的item前面的3个点是什么意思？难道是指传入的属性个数吗？

index.js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 16]

页面显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 17]

例5：模板引用

第一种引入方式：import

index.wxml 通过import标签导入a.wxml template 的is属性是引用的模板名称  
![在这里插入图片描述][20200110095344162.png]  
a.wxml:  
![在这里插入图片描述][20200110095426496.png]

所以index.wxml的页面展示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 18]

第二种引入方式：include:

include引入的特点是引入除了template之外的所有标签

index.wxml  
![在这里插入图片描述][20200110095543619.png]

a.wxml:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 19]

讲解：在index.wxml里面引入了a.wxml中除了template之外的所有标签，所以只引入了Hello,word,而没有引入template name=“a”这个模板，所以在index.wxml里面的是没有用的，因为根本引不到

##### 例5：wxss样式的引入 #####

index.wxml:  
![在这里插入图片描述][20200110100604274.png]

index.wxss 通过@import导入 assets.wxss外来的样式  
![在这里插入图片描述][20200110101612124.png]

assets.wxss：  
![在这里插入图片描述][20200110101649651.png]

所以index.wxml页面的展示效果如下： 可以看到黑色的边框  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 21]

##### 例6：内联样式wxss的引入 （类似于前端的css样式） #####

index.wxml: 里面有一个colorValue变量  
![在这里插入图片描述][20200110101808117.png]

index.js 给colorValue变量赋值  
![在这里插入图片描述][202001101019402.png]

所以index.wxml的运行效果如下： 背景变成红色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 22]  
 wxss样式的优先级比较如下： ！import的优先级是无穷大，所以是最大  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 23]

##### 例7：module #####

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20220123/85e4b0927d074470b050c1294d8b5a41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20220123/a782541741d64aabbdaf89f785ff33da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20220123/7ffd9fbd0bba449198a8e1e8862c245e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: /images/20220123/d5173756992f42429dc14ad4e0143086.png
[format_png]: /images/20220123/0a4b74a6d11c415f94a709a09b522958.png
[20200110090521989.png]: /images/20220123/a7f0a4ef1dfd4826aa3247ae6fe8bd8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]: /images/20220123/a0a9df0f582a4ea7990566e06b862d17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]: /images/20220123/e509a5f8689c48d4b8c7110d7f7578d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 6]: /images/20220123/d1ab33951de048f6852fce91cd3aee9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 7]: /images/20220123/e8d1a5a7c10e4b06a6c471c19a5d0362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 8]: /images/20220123/fb1f61ddb3484ad7a82633340d79c0df.png
[20200110091004676.png]: /images/20220123/31038316bad54da7859b126c3e5a6c8f.png
[20200110091050646.png]: /images/20220123/afdd9959c5464b35a7556472e625026f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 9]: /images/20220123/eb8688f967fc4f44b352e50596203d0c.png
[20200110091201122.png]: /images/20220123/780feb030ade40ce8c779cdd8b0c4c1c.png
[2020011009133471.png]: /images/20220123/c01d10fd08db4b4395398147469cb740.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 10]: /images/20220123/b42bf59cf4484725a14a4b13ed9687bf.png
[202001100916064.png]: /images/20220123/22cd0a7e4d9f4663bea791b9d425ee6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 11]: /images/20220123/6b682832d9634f91a2f6082a8dd95dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 12]: /images/20220123/6b43e8c79da64f95b33ad16054787ce1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 13]: /images/20220123/48f6b45d1d784b20a1c6e488a88612d5.png
[20200110094951884.png]: /images/20220123/c4503b3feb4e4c7a8825de9c72c1d8f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 14]: /images/20220123/341024af851945579e38fd9ae3b5464d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 15]: /images/20220123/5a9ff37ecde940d8a7f16fbe5c3cb9e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 16]: /images/20220123/f73bf6aa8fb543228d7c338df97ea4a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 17]: /images/20220123/b04caee8c4cf4670998f8e4dedc0dcad.png
[20200110095344162.png]: /images/20220123/8d9527e50cd54f498b1116bbc32b7fa3.png
[20200110095426496.png]: /images/20220123/162d1281971245499f5781bb47e2d0cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 18]: /images/20220123/a61e8f62558e41be9307b1a1d949147e.png
[20200110095543619.png]: /images/20220123/930b2f54fccf48f5b78d168a0d9300c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 19]: /images/20220123/13558b69305a40c3911b4df3ea057c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 20]: /images/20220123/cef762ace94f4ffa838b9757b74a6223.png
[20200110100604274.png]: /images/20220123/ed2aeae35ee642678cacb58ce432f98a.png
[20200110101612124.png]: /images/20220123/2208912aeb5141e6b0b233158c9f35ee.png
[20200110101649651.png]: /images/20220123/daebfa49906943a381f16023a004acbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 21]: /images/20220123/bc97bf0457fd4757ab3af105f8eda39c.png
[20200110101808117.png]: /images/20220123/c069405ae1114800af6fe717e4b4ac42.png
[202001101019402.png]: /images/20220123/29d976fa3d4348fbab4ec99e2af472fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 22]: /images/20220123/1b8c7a9d3e9b477d967b721a847b1f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 23]: /images/20220123/98b4b78bcdf54f88829639aff297476a.png