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

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关键字即可

九九乘法表