小程序基础（二）

男娘i 2023-02-28 01:56 30阅读 0赞

## 小程序开发框架 ##

[小程序开发框架][Link 1]的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：**逻辑层**（App Service）和 **视图层**（View）。

小程序提供了自己的视图层描述语言 `WXML` 和 `WXSS`，以及基于 `JavaScript` 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

## WXML 语法参数 (参考官网) ##

*  [WXML 语法参数链接][WXML]

#### 1. 数据绑定 ####

*  双括号
 *  和vue、react的对比
    
     *  运算
     *  三元
     *  方法调用 (不行)
 *  属性可以使用\{ \{\}\}

#### 2. 条件渲染 ####

*  wx:if
 *  wx:if 和 wx:elif wx:else
 *  block
 *  wx:if 和 hidden

\#\#\#\#3. 列表渲染

*  wx:for 遍历简单类型数组
 *  wx:for 遍历对象数组
 *  起别名 wx:for-item=‘it’ wx:for-index=‘i’
 *  wx:key

## WXS 语法参考 (参考官网) ##

*  .wxs 文件
 *  wxs标

第一种方式 : 单独创建一个.wxs文件
          1. 创建common.wxs文件
          2. 创建一个方法  function my_slice(str) {  
              return str.slice(0,1)
           }
          3. module.exports.my_slice=my_slice
          4. 引入 <wxs src='./common.wxs' module='tool'>
          5. 使用 : <view>{ {  tool.my_slice(str) }}</view>
    
      第二种方式 : 在 wxml内 使用 wxs 标签处理
         1. 创建一个 wxs 标签 <wxs></wxs>
         2. 创建方法 function my_case(str) {   return str.toUpperCase()  }
         3. 导出  module.exports.my_case = my_case
         4. 使用模块接收 <wxs module='tool1'></wxs>
         5. 使用  tool1.my_case(str)

## 事件绑定 ##

#### 1. bindTap ####

*  **绑定事件**

*  **事件处理函数**

Page({ 
      click1() { 
        console.log(111)
      }
    })

*  **传参**

// 传递
    <button bindtap="click2" data-msg="abc" data-index="123">按钮2</button>
    
    // 接收
    click2(e){  
       e.currentTarget.dataset
    },

#### 2. catchTap 阻止冒泡 ####

#### 3. bindinput ####

*  **绑定事件**

*  **事件处理函数**

Page({ 
      // 绑定的事件
      handleInput: function(e) { 
            e.detail.value
      }
    })

## 数据操作 ##

*  [setData1][]
 *  \[setData2\](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html\#Page.prototype.setData(Object data, Function callback))
 *  获取数据 : `this.data.name`
 *  修改数据 :
    
     *  直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
     *  `setData` 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 `this.data` 的值（同步）。

console.log(this.data.name)  // zs
    this.setData({ 
    	name :'ls'
    })
    console.log(this.data.name)  // ls

## WXSS ##

*  [WXSS链接][WXSS]
 *  WXSS(`WeiXin Style Sheets`)是一套样式语言，用于描述 `WXML` 的组件样式。
 *  与 **CSS** 相比，**WXSS** 扩展的特性有：
    
     *  响应式长度单位 `rpx`
     *  样式导入

#### 1. 尺寸单位 ####

*  `rpx`（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为`750rpx`。如在 `iPhone6` 上，屏幕宽度为`375px`，共有750个物理像素，则`750rpx = 375px = 750物理像素`，`1rpx = 0.5px = 1物理像素`。
 *  **官网建议**：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
 *  **注意：** 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

#### 2. 样式导入 ####

*  使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。

/* app.wxss */
    @import 'common.wxss';
    
    .middle { 
    	color : 'red'
    }

#### 3. 行内样式 ####

#### 4. 选择器 ####

目前支持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td><code>.intro</code></td> 
   <td>选择所有拥有 class=“intro” 的组件</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td><code>#firstname</code></td> 
   <td>选择拥有 id=“firstname” 的组件</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td><code>view</code></td> 
   <td>选择所有 view 组件</td> 
  </tr> 
  <tr> 
   <td>element, element</td> 
   <td><code>view, checkbox</code></td> 
   <td>选择所有文档的 view 组件和所有的 checkbox 组件</td> 
  </tr> 
  <tr> 
   <td>nth-child(n)</td> 
   <td>view:nth-child(n)</td> 
   <td>选择某个索引的标签</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td><code>view::after</code></td> 
   <td>在 view 组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td>::before</td> 
   <td><code>view::before</code></td> 
   <td>在 view 组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

*  **注意 :**
    
     *  小程序 不支持通配符 `*`
 *  样式初始化配置

page,view,input,text { 
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

#### 5. 小程序使用less ####

原生小程序不支持`less`，我们可以借助 vscode 使用 less

1.  编辑器是`vscode`
2.  安装 VSCode插件 : `easy less`
3.  在vs code的设置中加入如下，配置
    
        "less.compile": { 
          "outExt":       ".wxss"
        }
4.  新建 `less`文件，如 `index.less`, 保存即可, 自动机会编程出样式到对应的`index.wxss` 里面

> 要么只用less ,要么只用 wxss 不要混着用,后果很严重, 因为 wxss的东西被会覆盖掉
> 
> less => wxss + wxml

## 自定义组件 ##

> 类似 vue 和 react 中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面。

#### 1. 创建自定义组件 ####

*  创建文件夹 `components/`
 *  创建 `组件` 文件夹 `Test/`
 *  右键 `新建 Component`

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FL1bY39c-1595140559959)(D:\\黑马课程\\备课\\05-小程序\\整理最新笔记+代码★\\md-imgs\\组件1.png)\]

*  **注意声明组件** (一般情况下是声明过了)
    
     *  在组件的 `json` 文件中进行自定义组件声明

// Test.json
    { 
      "component": true // 声明组件
    }

*  **注意注册组件** (一般情况下 也已经注册过了)

Component({ 
      /** * 1. 组件的属性列表 - 外界传进来的数据 */
      properties: { 
         name : { 
           type : String,
           value :'初始值'
         }
      },
      /** * 2. 组件的初始数据 - 组件自己的私有数据 */
      data: { 
      },
      /** * 3. 组件的方法列表 */
      methods: { 
      }
    })

#### 3. 引入组件 ####

*  首先要在页面的 `json` 文件中进行引用声明。还要提供对应的组件名和组件路径

// index.wxml 想使用组件的话, 就要在 index.json 里 先引入
    { 
      "usingComponents": { 
      	// 要使用的组件的名称 // 组件的路径
        "Test":"/components/Test/Test"
      }
    }

\#\#\#\#4. 使用组件

法列表  
\*/  
methods: \{  
\}  
\})

#### 3. 引入组件
    
    - 首先要在页面的 `json` 文件中进行引用声明。还要提供对应的组件名和组件路径
    
    ```js
    // index.wxml 想使用组件的话, 就要在 index.json 里 先引入
    {
      "usingComponents": {
      	// 要使用的组件的名称     // 组件的路径
        "Test":"/components/Test/Test"
      }
    }

\#\#\#\#4. 使用组件

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
[WXML]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
[setData1]: https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
[WXSS]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html