小程序基础 （二）

小程序开发框架

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

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

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

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

• 绑定事件

<button bindtap="click1">按钮1</button>

• 事件处理函数

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

• 传参

// 传递
<button bindtap="click2" data-msg="abc" data-index="123">按钮2</button>

// 接收
click2(e){ 
   e.currentTarget.dataset
},

2. catchTap 阻止冒泡

 按钮1 
 按钮2

3. bindinput

• 绑定事件

<input bindinput="handleInput" />

• 事件处理函数

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(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. 行内样式

<view style="color : red;">啊哈</view>

4. 选择器

目前支持的选择器有：

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

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

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. 使用组件

<Test>Test>

法列表
*/
methods: {
}
})

#### 3. 引入组件

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

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

####4. 使用组件

<Test>Test>