【微信小程序学习笔记02理解与初始准备】【实战天气微信小程序】

目录

参与的udacity 微信小程序的纳米学位期间的学习笔记，其中代码或描述若有不足部分敬请指点，万分感谢！

---

注册小程序账号，获取AppID

要在手机微信上运行测试小程序，必须获取AppID。

---

开发准备

目录结构

当下基于ReactJs的AntDesignPro v2.0版本的目录使用了umiJs作为项目脚手架。与wxApp一样是基于功能与页面的维度的目录结构不再扁平化。特点都是：结构更加清晰，减少耦合（独立,增加可维护性,），一删全删，方便 copy 和共享。

├── images ##推荐公共图片等资源放在此处！
├── pages                     # 业务页面入口和常用模板
│   ├── index                # 同类型页面文件夹（基于功能与页面的维度的目录结构）
│    │   - index.js          ## 页面数据逻辑（必须）
│    │   - index.wxml        ## 页面结构（必须）
│    │   - index.wxss        ## 页面样式表（非必须）
│    │   - index.jason       ## 页面配置（非必须）
│   └── logs                  # 日志
│       ├── logs.wxml
│       └── logs.js
├── utils                      # 工具类
├── app.js                     # 小程序逻辑（必须）
├── app.wxss                   # 小程序公共样式表（非必须）
├── app.jason                  # 小程序公共配置（必须）！决定页面路径、窗口、网络超时时间、设置tab 

为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

删快速模板中不必要的代码

1. 删除 app.js 中的所有代码。 这里会存储整个小程序会执行的一些逻辑，例如权限获取等。我们暂时不需要。
2. 删除 app.wxss 中的所有代码。这里会存储整个小程序的一些样式。我们暂时不需要。
3. 删除 app.json 中的第四行 “pages/logs/logs” 以及第三行最后的逗号，这里声明了小程序的第二个页面，我们暂时不需要。
4. 删除 pages/logs 文件夹以及其中的所有文件。这里定义了小程序的第二个页面，我们暂时不需要。
5. 删除 utils 文件夹以及其中的所有文件。 这里定义了一些用途函数，我们暂时不需要。
6. 删除 index.js 中的所有代码，这里会定义 index 页面的逻辑。只保留一行 Page({})
7. 删除 index.wxml 中的所有代码，这里会定义 index 页面的布局。只保留一行

<view class="title">hello world!</view>

1. 删除 index.wxss 中的所有代码，这里会定义 index 页面的样式。只保留

.title {
   margin-top: 300rpx;
   text-align: center;
}

---

视图层

何为WXML

WeiXin Markup Language是框架设计的一套标签语言。与HTML的基本功能一样用于构建出页面的结构。其次还能实现数据绑定，列表渲染，条件渲染，模板（可理解为想ReactJs之类js框架中的component），事件。

数据绑定

<!--wxml-->
<view> {
   {
   message}} </view>

列表渲染

<!--wxml-->
<view wx:for="{
   {
   array}}"> {
   {
   item}} </view>

条件渲染

<!--wxml-->
<view wx:if="{
   {
   view == 'WEBVIEW'}}"> WEBVIEW </view>

模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {
   {
   firstName}}, LastName: {
   {
   lastName}}
  </view>
</template>

<template is="staffName" data="{
   {
   ...staffA}}"></template>
<template is="staffName" data="{
   {
   ...staffB}}"></template>
<template is="staffName" data="{
   {
   ...staffC}}"></template>