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

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

一、注册微信小程序

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

选择“小程序”

然后点击“链接地址”激活账号即可

然后进行“主体信息登记”

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

二、下载微信开发者工具

点击“文档”

然后按下面的图示点击

我这里选择“稳定版”

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

其他的选默认的即可

小程序的代码结构如下：

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样式)

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

例1：

新建一个index.wxml (.wxml文件就类似于我们的html文件的作用一样)

新建一个index.js文件

页面显示效果图如下：

例2： 数据绑定

​ index.wxml:

​ index.js: 给theName这个变量赋值

页面显示效果如下：

例3：列表渲染

index.wxml:

index.js:

页面展示效果：

例4：条件渲染

index.wxml： 类似于程序设计里面的if ，else

index.js:

页面展示效果：

例5：模板引用

index.wxml:

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

index.js:

页面显示效果如下：

例5：模板引用

第一种引入方式：import

index.wxml 通过import标签导入a.wxml template 的is属性是引用的模板名称

a.wxml:

所以index.wxml的页面展示效果如下：

第二种引入方式：include:

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

index.wxml

a.wxml:

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

所以index.wxml的页面展示效果如下：

例5：wxss样式的引入

index.wxml:

index.wxss 通过@import导入 assets.wxss外来的样式

assets.wxss：

所以index.wxml页面的展示效果如下： 可以看到黑色的边框

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

index.wxml: 里面有一个colorValue变量

index.js 给colorValue变量赋值

所以index.wxml的运行效果如下： 背景变成红色

​ wxss样式的优先级比较如下： ！import的优先级是无穷大，所以是最大

例7：module