1.回顾

明确：
JS逻辑层文件JavaScript
WXML页面的描述文件XeiXin Markup Language
WXSS样式文件WeiXin Style Sheets
快捷键：
Ctrl+S 保存文件
Shift+Alt+F 格式化代码
Ctrl+/ 代码整行注释或取消，在空白行次快捷键可添加注释
项目调试：
真机调试–右上角真机调试，扫码手机测试
开发工具调试–共10个功能
1）Console面板：控制台，在执行代码有误时，显示错误信息
2）Sources面板：显示当前项目的脚本文件以及进行重要的断点或者单步调试，左侧是源文件的目录结构
3）Network面板：云开发可以看到前后端交互时网络请求与返回数据等信息
4）AppData面板：显示当前项目运行时的具体数据
5）Storage面板：可以看到项目中使用小程序的API接口wx.setStorage或者wx.setStorageSync后本地数据缓存的情况
6）Wxml面板：与Chrome调试器中的Elments面板一样，可以看到页面布局文件的源代码。
页面UI样式调试可以使用真机预览
项目发布：
上传
管理员提交体验版
体验版本的设置
提交审核
完整的小程序结构：
项目全局描述与配置文件：

项目逻辑文件app.js
项目配置文件app.json
全局样式文件app.wxss
其它文件project.config.json/sitemap.json

其它资源文件
页面描述文件:

页面逻辑文件xx.js
页面配置文件xx.json
页面样式文件xx.wxss

新建页面的方法：
新建文件夹
右键：新建page

2.小程序的视图与渲染

2.1 视图与渲染过程

视图层由页面文件WXML和样式文件WXSS共同组成
WXML中有多个组件component，每个组件都有自己特有的属性，有的组件为了完成某些业务逻辑还需要绑定事件与数据
事件是视图层和逻辑层的纽带：用户操作触发事件后可通过同名的事件处理函数执行相应的逻辑，处理完成后，更新的数据又将再次渲染到页面上

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view>
</view>

最外层是样式（即class属性）为container的view组件
最大层view的下一级又嵌套了两个view,class分别叫userinfo和usermotto
前面一个view的内部还有button组件
<block wx:else>这个是包装元素，并不是组件，不会进行页面的渲染

2.2 数据绑定

WXML页面中可以用双花括号里面添加变量名的形式表示动态数据，这称为Mustache语法
Mustache语法是一个模板解析引擎，其作用是使用户界面与数据分离，可生成特定格式标准的HTML文档。
WXML中的动态数据均来自对应JS文件中的Page的data属性，分别可以作用于WXML页面的内容、组件属性、控制属性等。

2.3 渲染标签

条件渲染
条件渲染是指根据绑定表达式的逻辑值来判断是否渲染当前组件
view组件拥有控制是否显示的hidden属性

<view class="content" hidden="{{flag ? true : false}}">
</view>

Page({data:{flag:false}
})

wx:if与hidden控制是否渲染的逻辑变量值恰好相反

<view wx:if="{{length > 10}}">case1</view>
<view wx:elif="{{length > 5}}">case2</view>
<view wx:else>case3</view>

Page({data:{length:6}
})

block wx:if
使用一个表达式控制多个组件，使用标签将一个包含多节点的结构块包装起来，然后在标签中添加一个wx:if控制属性

<block wx : if = "{{condition}}">
<view> view1 </view>
<view> view2 </view>
</block>

Page({data:{condition:true}
})

列表渲染
wx:for简单列表渲染

<view wx:for = "{{array}}">
{{index}} : {{item.message}}
</view>

Page({data:{array:[{"message" : "mes1"},{"message" : "mes2"}{"message" : "mes3"},{"message" : "mes4"}]}
})

循环数组中index和item都是默认变量名，在使用wx:for时也可以将数组当前下标和当前元素变量进行重命名
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名

<view>
<view wx:for = "{{users}}" wx:for-index="myindex" wx:for-item="user">
<text>{{myindex}}-{{user.name}}-{{user.age}}</text>
</view>
</view>

Page({data:{users:[{name:"Toky", age:21},{name:"Nike", age:19},{name:"Lisa", age:20}]}
})

九九乘法表案例
wx:for嵌套列表
block wx:for包装–用于循环渲染标签，渲染包含多个节点
wx:key属性–用于在渲染列表时是否需要依据列表的某一关键字或自定义关键字进行排序

2.4 模板与引用

WXSS文件使用import关键字导入公共样式文件
针对JS文件，可在utils.js或其它JS文件夹中编写公共的业务逻辑，最后利用exports关键字进行导出
下面的引用和模板皆针对于WXML文件

引用本页面的模板

    <text class='h1'>模板与引用</text><view class='demo-box'><view class="title">1、定义模板区域</view><!--pages/demo2-4/template.wxml--><!----定义模板--><template name="userTemplate"><view><view>姓名：{{item.name}}</view><view>年龄：{{item.age}}</view></view></template><!-- 定义结束 --></view><view class='demo-box'><view class="title">2、调用模板</view><block wx:for="{{users}}"><!-- 调用模板，传入对象数据--><template is="userTemplate" data="{{item}}" /></block></view>

Page({/*** 页面的初始数据*/data: {users: [{name: "Toky",age: 21}, {name: "Nike",age: 19}, {name: "Lisa",age: 20}],
})

is属性指定是哪一个模板，利用data属性动态传入数据

也可以单独一个WXML文件定义模板，这时其他页面进行引用时不是用关键字include，而是用import，二者的作用域不同。
import只会引入目标文件中定义的template，而不会引入目标文件里面再引入的其它template，即不能链式引用

<template name="template1"><text>{{text}}</text>
</template>
<template name="template2"><text>{{text}}</text>
</template>

<import src="../commons/templates"/>
<template is = "template1" data="{{text:'这是传入模板的需要显示的内容'}}">

若只想引入静态的WXML片段直接使用include关键字即可

九九乘法表

2021-09-03 【N02】小程序开发学习笔记相关推荐

微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目文件目录设置 JS文件环境使用及创建项目环境使用:微信开发者工具一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
微信小程序开发学习笔记007--微信小程序项目01
技术交流QQ群:170933152 今天做项目小程序开发必备基础如何独立开发一个项目豆瓣电影需要的基础: HTML+CSS JavaScript 网络先理解需求-->了解项目流程,项目 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
基于有Vue基础的微信小程序开发学习笔记
微信小程序开发文章目录微信小程序开发一.微信小程序介绍二.小程序结构目录 1.小程序的文件结构 2.基本项目目录三.配置文件详解 1.全局配置文件 2.页面配置文件 3.sitemap配置 ...
微信小程序开发学习笔记004--微信小程序语法结构
今天讲微信小程序的语法结构技术交流QQ群:170933152 数据绑定:把数据声明后显示在页面上渲染:条件渲染,循环渲染模板:某个小需求,模块封装成模板事件:点击一个按钮触发一个事件,发送一个 ...
微信小程序开发学习笔记002--微信小程序框架解密
1.今天内容比较多, 框架解密 • 目录结构 • 配置文件详解 • 逻辑层 • Api简介 ----------------------- 2.打开微信开发工具, 点击添加项目,选择无appid模 ...
2020-微信小程序开发学习笔记
文档文档地址小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务. 小程序框架参考文档小程序组件参考文档小程序 API 参考文档小 ...
微信小程序开发学习笔记2——安心食疗
一.数据绑定 1.1 渲染层和逻辑层小程序宿主环境我们称微信客户端给小程序所提供的环境为宿主环境.小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能. 小程序开发框架的目标是通过尽可 ...
微信小程序开发学习笔记006--微信小程序组件详解02
技术交流QQ群:170933152 案例7:开关选择器案例8:各种图标案例9:页面跳转案例10:多媒体音视频案例11:嵌入地图案例12:画布:在上面可以画柱状图等等. 今天继续讲组件: 登录 ...

2021-09-03 【N02】小程序开发学习笔记