微信小程序快速入门篇（二）--核心语法

小程序的核心语法

开发文档 微信开放文档 (qq.com)

一、了解什么是数据驱动和小程序的数据双向绑定

1. 数据驱动就是 我们数据发生改变，页面也跟着变化
2. 小程序的数据双向绑定
   1. 我们在js文件中添加一个data data里面写我们的数据 然后在页面中 我们使用 {{}} 来使用data数据

二、常用事件和属性列表

怎么绑定点击事件？如何修改数据

• 小程序绑定点击事件是使用 bindtap来绑定的

  <button type="primary" bindtap="addNum">商品数量+1</button>
  

• 我们在index.js中修改data数据 修改这个数据是需要借助一个函数来实现的 setData

  		// 注册的事件是和data同级别
  	addNum(){
  		console.log(1);
  		// 修改data中的值 修改借助函数 setData
  		this.setData({
  			// 结构都是 key:value
  			// product.num key值
  			"product.num":this.data.product.num +1
  		})
  
  	}
  

我们如何给事件传参数呢？

• 传参的时候我们要使用自定义属性 data-xx = xx这样子来传
• 然后我们在函数中通过 event对象来获取
  • 值是放在target.dataset中

<!-- 事件传参 如何把我们需要的数量传到函数中呢 
		1、我们传的参数不能直接写在函数上 我们要添加一个自定义属性来传
			data-xxx=xxx
		2、我们通过event对象来获取到传来的值
			值是放在 e.target.dataset
	-->
	<button type="primary" plain style="margin-top: 20px;"
	bindtap="addNums" data-num="5"
	>添加n个数量</button>

addNums(e){
		console.log(e);
		// 我们可以看到 e.target.dataset中有我们传过来的值
		let num = parseInt(e.target.dataset.num)
		this.setData({
			"product.num":this.data.product.num+num
		})
	}

完成小程序的数据双向绑定

• 什么是数据双向绑定
  • 输入框内容发生变化 ，商品的数量也跟着变化，商品数量发生变化 输入框内容也跟着变化
• 那我们应该怎么做？
  • 创建一个输入框
  • 设置输入框的值为商品的数量值 绑定输入框的 value值
  • 监听用户输入行为 onInput
  • 获取用户输入的值 e.target
  • 修改data值

<!-- 数据双向绑定 
			当我们输入一个数字 然后商品的数量就跟着这个变
			步骤：
				1、创建一个输入框
				2、绑定value值为我们的商品数量
				3、监听输入事件
				4、拿到输入的值
				5、赋值
	-->
	<view>
	<text>请输入商品数量:</text>
	<input class="input" type="number" value="{{product.num}}" bindinput="inputNum" />
	</view>

	// 输入框 当我们输入的值给到我们的商品数量
	inputNum(e){
		console.log(e.detail);
		let num = parseInt(e.detail.value)
		this.setData({
			"product.num":num
		})
	}

三、条件渲染

在小程序中我们使用的条件渲染有两个 第一 wx:if wx:elif wx:else 第二 hidden(跟vue的v-show是一样的)

区别 wx:if 当条件满足则渲染 否则不渲染

hidden 一开始就渲染了 当条件满足则显示 否则隐藏

	<!-- 条件渲染 
		wx:if
		hidden
		当我们购买的数量小于10的时候 hello 帅哥
		大于10小于100的时候 hello有钱人
		大于100的时候 hello 土豪
	-->
	<view style="margin-top: 20px;">
		<text wx:if="{{product.num<10}}"> hello 帅哥</text>
		<text wx:elif="{{product.num>10&&product.num<100}}"> hello有钱人</text>
		<text wx:else> hello 土豪</text>
	</view>

	<view style="margin-top: 20px;">
		<text hidden="{{!(product.num<10)}}"> hello 帅哥</text>
		<text hidden="{{!(product.num>10&&product.num<100)}}"> hello有钱人</text>
		<text hidden ="{{!(product.num>100)}}"> hello 土豪</text>
	</view>

四、配置文件的说明

1. app.json

   1. pages

      pages字段 —— 用于描述当前小程序所有页面路径

      我们创建页面可以有两种方法 第一种就是直接在pages文件夹中新建一个文件夹 然后新建一个page即可

      第二 我们可以直接在app.json中进行添加路劲

   2. window

      定义小程序所有页面的顶部背景颜色，文字颜色定义等

3. tabbar

   底部tab栏的表现

     "tabBar": {
       "selectedColor": "#f94d2a", //选中的颜色
       "list": [{
         "pagePath": "pages/index/index", // 路劲
         "text": "首页", //标题
         "iconPath": "images/home-unselect.png", // 默认图标
         "selectedIconPath": "images/home-select.png" // 选中的图标
       },
       {
         "pagePath": "pages/list/list",
         "text": "列表",
         "iconPath": "images/list-unselect.png",
         "selectedIconPath": "images/list-select.png"
       }
     ]
       
     },
   

五、如何发送请求

我们使用微信的组件

wx.request

	wx.request({
			url: 'http://api', //接口地址
			method:'get',//请求方法
        	//请求成功
			success:(res)=>{
				console.log(res);
			},
        	// 传递参数
        	data:{}
		})

当出现这种情况的时候我们有两种解决方案

1. 开发环境

   我们在编辑器右侧==》详情==》不不校验合法域名 打开即可

2. 上线环境

   我们要去后台配置一个安全域名即可

六、生命周期

onLoad 监听页面加载

onReady：监听页面初次渲染完成

onShow 监听页面显示

onHide 监听页面隐藏

onPullDownRefresh：监听用户下拉动作

onReachBottom：页面上拉触底事件的处理函数

七、实现一个下拉加载 上拉刷新

下拉加载：也就是类似我们的分页功能

1. 当我们滚动到最下面的时候 会触发下拉动作 在这里我们可以发送分页请求
2. 然后更新数据 一直到 列表的长度等于total的时候我们就可以取消发送请求了

上拉刷新 ：当我们上拉的时候 获取最新的数据 然后把新数据覆盖掉老数据 然后关闭上拉的效果

八、小程序的跳转

1. 编程式导航

   1. 跳转到tabbar页面
   2. 跳转到非 tabbar 页面
   3. 后退页面

2. 声明式导航

   1. 跳转到tabbar页面
   2. 跳转到非 tabbar 页面
   3. 后退页面

3. 使用

   1. 声明式

      1. 小程序提供了 navigator 来作为跳转 使用这个组件可以实现

      2. 声明式导航

         navigator 跳转到 非 Tabbar中

         url="/pages/detail/detail" 跳转路劲 前面必须加 /

         跳转到tabbar中必须加上 onpe-type = “switchTab”

         携带参数 我们在url后面进行配接 ?key=value

      3. <navigator url="/pages/detail/detail">跳转</navigator>
         <navigator url="/pages/detail/detail?key=value">跳转</navigator>
         <navigator url="/pages/index/index" open-type="switchTab">跳转到tabbar</navigator>
         

   2. 编程式

      ​ 定义一个点击事件 然后用小程序的api来实现

      ​ 跳转到非Tabbar wx.navigateTo

      ​ 跳转到tabbar wx.switchTab

      ​ 后退页面 wx.navigateBack

   3. 传参

      直接在url后面添加上

      我们在onLoad生命周期中有一个参数 options 里面存放传来的参数

九、组件化

组件的生命周期和方法应该放在哪里

1. 生命周期必须放在 lifetimes 中
2. 方法应该放在 methods 中

组件的生命周期有哪些

1. create: 组件实列刚刚被创建好，此时不能调用setData
2. attached： 组件完全初始化完毕、进入页面的节点树之后，大多数工作在在哪里完成
3. detached:在组件离开的时候

在那个生命周期可以进行操作

一般在 attached中调用

十、组件之间的传值

1. 父传之

   也就是父组件给子组件传值 通过 properties

   <!--我们在子组件的js中定义一个 properties属性 然后把值放进去-->
   子
   properties: {
           tabId: String
     },
   父组件
   <list tabId="{{id}}"></list>
   

2. 子传父

   子组件给父组件传值 需要通过 triggerEvent 方法发送一个通知，通知父组件接受参数

   <!--子组件-->
   this.triggerEvent('chang',{
   id
   })
   <!--父组件-->
   <list bind:chang></list>
   js
   chang(e){
   e.target.detail
   }
   

3. 兄弟传值

   需要借助一个中间人 这里的中间人也就是父组件

   我们把数值传给父组件 父组件在传给另外一个组件

十一、插槽

1、定义一个插槽

1. 我们在组件中 添加 一个 slot 标签即可

2. 然后我们在使用他的时候 直接在组件内添加文字

3. <!-- 我是父组件 -->
   <list pId="{{id}}">
       我是父组件的
     </list>
   <view>
       <!-- list -->
     <scroll-view scroll-y> 
     <!-- 单一插槽 -->
     <slot></slot>
     <view class="listItem" wx:for="{{list}}" wx:key="index"> {{item.name}} </view>
     </scroll-view>
   </view>
   

2、定义多个插槽

我们只需要将 slot 标签添加一个name 然后使用的时候 <view slot=“name”></view> 即可

注意我们还要在组件的 js 中 配置一个options 然后 multipleSlots ：true

  <list pId="{{id}}">
     <view slot="header">我是父组件定义的头</view>
    <view slot="footer">我是父组件定义的尾</view>
  </list>

  <!-- 多个插槽 我们通过命名来做 -->
  <slot name="header"></slot>
  <view class="listItem" wx:for="{{list}}" wx:key="index"> {{item.name}} </view>
  <slot name="footer"></slot>

  // 开启多个插槽
  options:{
    multipleSlots:true
  },

好了，当你看到这里的时候，你现在可以开发自己的小程序了