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

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

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

一、注册微信小程序

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

在这里插入图片描述

选择“小程序”
在这里插入图片描述

在这里插入图片描述

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

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

二、下载微信开发者工具

点击“文档”
在这里插入图片描述

然后按下面的图示点击
在这里插入图片描述

我这里选择“稳定版”
在这里插入图片描述

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

其他的选默认的即可
在这里插入图片描述

在这里插入图片描述

小程序的代码结构如下：

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

发表评论

表情：
评论列表 （有 0 条评论，753人围观）

还没有评论，来说两句吧...

相关阅读

    相关 学习微信小程序

    、从小程序指南文档开始看起：[小程序指南][Link 1]   2、开发者工具下载：[小程序开发工具][Link 2]   转载于:https://www.cnb...

    亦凉亦凉/ 0 赞/ 160 阅读