微信小程序

今天我们来学习微信小程序的基础知识。

• 目录结构

1.pages 存放页面地方
index 首页
1).index.js 首页的业务逻辑（js）
2).index.json 首页的配置文件
3).index.wxml 首页的模板文件（html）
4).project.config.json 项目配置文件
logs 信息页面
2.utils 存放工具的地方
3.app.js 小程序主逻辑
4.app.json 小程序主配置文件
5.app.wxss 小程序主样式文件（css）
6.project.config.json 项目配置文件

• app.json 小程序的配置

pages 页面配置
谁在最前面谁默认显示

• 创建一个小程序页面

1.pages 右键 创建文件夹 （例如：list）
2.list 右键创建页面 list
3.Windows 关于小程序界面配置

• js

data 小程序的数据
msg

• wxml

{{msg}}

• 标签模板

text 行内
view 块

• 条件渲染

wx:if
wx:else
wx:elif

• 列表渲染

1.wx:for="{{list}}"
1).list 循环的数据
2).自动出现的 item 当前循环的下标
3).index 当前循环的下标
4).wx:key=""
2.自定义index
wx:for-index="num" 取下标 不用index 而是用num代替
3.自定义item
wx:for-item="myItem" 取当前循环的元素时候不用item 用myItem代替

• 事件

1.绑定事件 bindtag="showMsg"
2.绑定事件函数 XXX.js show(){}
3.事件的参数
data-参数名
data-name
e.currentTarget.dataset 参数名
e.currentTarget.dataset.name

• 表单 input

1.属性
value 值
placeholder 提示框内容
2.事件
bindinput 表单发送改变
bindconfirm 确定
3.js中获取标签的值
e.detail.value

• 更新数据
  this.setData(数据名称:新的数据值)
• wxss 微信样式表

1.微信的样式 和CSS网页几乎一样
2.微信里面 750rpx 等于当前屏幕的宽
3.app.wxss 全局样式
4.页面 .wxss 只对当前页面有效

接下来和大家分享一下小编今天的小收获！

index.png
list.png
todo.png

想要了解更多的可以阅读微信小程序官方文档。
好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。