小程序基础学习篇

深碍√TFBOYSˉ_ 2022-12-13 04:29 304阅读 0赞

## 小程序基础学习篇------2020-10-15 ##

#### 生命周期 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

##### 应用生命周期 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 1]

//app.js
    App({ 
    	/* 应用第一次启动就会触发的事件 */
    	
    	onLaunch: function() { 
    		// 应用第一次启动的时候，获取用户的个人信息
    		
    		/* js方式跳转，在这里写的，onPageNotFound不会被触发 */
    		/* wx.navigateTo({ url:'11/222/23' }) */
    		
    		// 展示本地存储能力
    		var logs = wx.getStorageSync('logs') || []
    		logs.unshift(Date.now())
    		wx.setStorageSync('logs', logs)
    	
    		// 登录
    		wx.login({ 
    			success: res => { 
    				console.log(res)
    				// 发送 res.code 到后台换取 openId, sessionKey, unionId
    			}
    		})
    		// 获取用户信息
    		wx.getSetting({ //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    			success: res => { 
    				console.log(res)
    				if (res.authSetting['scope.userInfo']) { //判断是否授权
    					// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
    					wx.getUserInfo({ 
    						success: res => { 
    							console.log(res)
    							// 可以将 res 发送给后台解码出 unionId
    							this.globalData.userInfo = res.userInfo
    	
    							// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
    							// 所以此处加入 callback 以防止这种情况
    							if (this.userInfoReadyCallback) { 
    								this.userInfoReadyCallback(res)
    							}
    						}
    					})
    				}
    			}
    		})
    	},
    	/* 应用被用户看到的时候触发 */
    	onShow:function(){ 
    		//页面数据和页面效果重置
    	},
    	
    	/* 应用被隐藏的时候触发 */
    	onHide:function(){ 
    		//暂停或清楚定时器
    	},
    	/* 应用发生错误的时候触发，入参是错误信息 */
    	onError:function(err){ 
    		//应用发生代码报错的时候，收集错误信息，通过一部请求，将信息发送到后台去
    		console.log(err)
    	},
    	/* 页面找不到的时候会触发 应用第一次启动的时候，如果找不到入口文件就会触发 */
    	onPageNotFound:function(){ 
    		// 如果页面不存在，同通过js的方式重新跳转页面，重新跳到第二个首页
    		// 不能跳转到tabbar页面，与导航组件类似
    	},
    	/* 未处理的 Promise 拒绝事件监听函数 */
    	onUnhandledRejection:function(){ },
    	/* 监听系统主题变化 */
    	onThemeChange:function(){ },
    	
    	
    	
    	globalData: { 
    		userInfo: null
    	} 
    })

##### 页面生命周期 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 2]

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
      },
    
      /** * 生命周期函数--监听页面加载。// 页面创建时执行 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面显示//页面出现在前台时执行 */
      onShow: function () { 
    
      },
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
      
      },
    
      /** * 生命周期函数--监听页面隐藏// 页面从前台变为后台时执行 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 * 也可以通过点击超链接来演示： * navigator的open-type值为“redirect\relauch\navigateBack”、即关闭页面 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作；页面数据或者页面效果重新渲染 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      },
      
      /* 页面滚动就会触发 */
     onPageScroll:function(){ }
     /* 页面的尺寸发生改变时触发 小程序发生横屏和竖屏的切换时会触发 */
     onResize:function(){ }
     /* 必须要求当前页面也是tabbar页面 点击的自己的tabbar后才会触发 */
     onTabItemTap:function(){ }
    })

#### 组件的使用 ####

新建component  
[组件官网地址][Link 1]

##### 父组件向子组件传递 #####

> 父组件（页面）向子组件发送数据， 通过标签属性的方式来传递  
> · 在子组件上进行接收  
> · 把这个数据当成data中的数据直接使用即可

###### 父组件 ######

<Tabs tabs="{ {tabs}}"></Tabs>

// 父组件的json
    { 
      "usingComponents": { 
        "Tabs":"../../components/Tabs/Tabs"
      }
    }

//父组件的js，放数据的
    Page({ 
    
    	/** * 页面的初始数据 */
    	data: { 
    		tabs: [{ //将把该数据传到子组件
    				id: 0,
    				name: "首页",
    				isActive: true
    			},
    			{ 
    				id: 1,
    				name: "原创",
    				isActive: false
    			},
    			{ 
    				id: 2,
    				name: "新闻",
    				isActive: false
    			},
    			{ 
    				id: 3,
    				name: "关于",
    				isActive: false
    			}
    		]
    	},
    })

###### 子组件\[component\] ######

> 1 绑定点击事件 需要在methods中绑定  
> 2 获取点击的索引  
> 3 获取原数组

> //循环数组 \[\].forEach 遍历数组 修改了item【数据项】，原数组也会被修改

*  组件的方法列表：
    
     *  页面.js文件中，存放事件回调函数的时候，存放在data同层级下！！！！
     *  组件.js文件中，存放事件的回调函数的时候，必须放在methods中！！！

//获取data中的原数组  
//· 解构 对 复杂类型进行结构的时候，复制一份变量的引用而已  
//· 最严谨的做法 重新拷贝一份数组，再对数组的备份进行处理。不要直接 this.data.数据  
//· 可以这样拷贝一份：`let tabs = JSON.parse(JSON.stringify(this.data.tabs));`  
`let {tabs} = this.data;`//等价于 `let tabs = this.data.tabs;`

//子组件的js
    Component({ 
    	/** * 组件的属性列表：从父组件传递过来，接收的数据 */
    	properties: { 
    		// 要接收的数据名称
    		aaa:{ 
    			type:String,//type 要接收的数据类型
    			value:""//value 默认值
    		},
    		tabs:{ 
    			type:Array,
    			value:[]
    		}
    	},
    
    	/** * 组件的初始数据 */
    	data: { 
    		
    	},
    	methods: { 
    		handleTap:function(e){ 
    			console.log(e)
    			// 获取索引
    			const { index}  = e.currentTarget.dataset;
    			//获取data中的原数组
    			
    			let { tabs} = this.data;//等价于 let tabs = this.data.tabs;
    			/*4 对数组循环 · 给每一个循环项选中属性改为false · 给当前索引的项，将选中属性改为true */
    			tabs.forEach((item,i)=>i===index?item.isActive=true:item.isActive=false);
    			this.setData({ 
    				tabs
    			})
    		},
    	}
    })

//子组件的json
    { 
      "component": true,
      "usingComponents": { }
    }

##### 子组件向父组件传递 #####

###### 子组件 ######

> 子向父传递数据 通过事件的方式传递  
> · 在子组件的标签中加入一个自定义事件

1 绑定点击事件 需要在methods中绑定  
2 获取点击的索引  
3 获取原数组  
4 点击事件触发的时候  
**触发父组件中的自定义事件 同时传递数据给父组件**

this.triggerEvent("父组件中自定义事件的名称",要传递的参数)

<view class="tabs">
    	<view class="tabs-title">
    		<view class="tabs-title-item { {item.isActive?'active':''}}" wx:for="{ {tabs}}" wx:key="id" bindtap="handleTap" data-index="{ {index}}">
    			{
       {item.name}}
    		</view>
    	</view>
    	<view class="tabs-content">
    		
    		<slot></slot>
    	</view>
    </view>

// https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
    //子组件的js
    Component({ 
    	methods: { 
    		handleTap:function(e){ 
    	
    			// 获取索引
    			const { index}  = e.currentTarget.dataset;
    			//触发父组件中的自定义事件 同时传递数据给父组件
    			this.triggerEvent("itemChange",{ index})
    			
    		},
    	}
    })

###### 父组件 ######

<Tabsctf tabs="{ {tabs}}" binditemChange="handlerItemChange">
    	<block wx:if="{ {tabs[0].isActive}}">0</block>
    	<block wx:elif="{ {tabs[1].isActive}}">1</block>
    	<block wx:elif="{ {tabs[2].isActive}}">2</block>
    	<block wx:else>3</block>
    </Tabsctf>

//父组件的js
    Page({ 
    	// 自定义事件用来接收从子传过来的参数
    	handlerItemChange: function(e) { 
    		const { index} = e.detail;
    		
    		let { tabs} = this.data;//等价于 let tabs = this.data.tabs;
    		//循环数组 [].forEach 遍历数组 修改了item【数据项】，原数组也会被修改
    		tabs.forEach((item,i)=>i===index?item.isActive=true:item.isActive=false);
    		
    		this.setData({ 
    			tabs
    		})
    	}
    
    })

### slot 占位符 插槽 ###

等到 父组件调用 子组件的时候，再传递这些标签

## 小程序基础学习篇------2020-10-14 ##

##### 条件渲染 #####

> js：if else, if else if else

> 1、 小程序  
> wx:if="\{ \{true/false\}\}"

> wx:if  
> wx:if

> wx:if  
> wx:elif  
> wx:else  
> 2、hidden 在标签上直接加上属性 hidden="\{ \{true\}\}"
> 
> 3、使用场景如下：  
> 当标签不是频繁切换显示的时候，优先使用wx:if  
> 直接把标签从页面结构直接移除，性能消耗大  
> **当标签频繁的切换的时候，优先使用hidden**  
> 通过**添加样式**的方式来切换显示  
> **hidden属性 不要 和样式 display 一起使用**

<view>
    	  <view>条件渲染</view>
    	  <view wx:if="{ {true}}">1</view>
    	  <view wx:if="{ {false}}">2</view>
    	  <view>------------------</view>
    	  <view wx:if="{ {false}}">1</view>
    	  <view wx:elif="{ {false}}">2</view>
    	  <view wx:else>3</view>
    	  <view>------------------</view>
    	  <view hidden>hidden-1</view>
    	  <view hidden="{ {false}}">hidden-2</view>
      </view>

#### 常用组件 ####

view 、 text 、 rich-text、 button、 image 、 navigator、 icon、 swiper、 radio、 checkbox 等

<table> 
 <thead> 
  <tr> 
   <th>组件名称</th> 
   <th>组件地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>view</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/view.html</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/text.html</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/image.html</td> 
  </tr> 
  <tr> 
   <td>swiper</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html ;https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html</td> 
  </tr> 
  <tr> 
   <td>navigator</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html</td> 
  </tr> 
  <tr> 
   <td>rich-text</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/button.html</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/icon.html</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/radio.html ;https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html ;https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>https://developers.weixin.qq.com/miniprogram/dev/component/input.html</td> 
  </tr> 
 </tbody> 
</table>

##### input #####

> 1 需要给input标签绑定 input事件  
> **绑定关键词 bindinput**  
> 2 如何获取输入框的值  
> **通过事件源对象获取  
> e.detail.value**  
> 3 把输入框的值 赋值到 data 中  
> 不能直接写下面的两种：  
> this.data.num=e.detail.value  
> this.num = e.detail.value  
> **应该使用如下：**  
> *this.setData(\{  
> num:e.detail.value  
> \})*
> 
> 4 需要加入一个点击事件  
> · **bindtap**  
> · 无法在小程序中给事件 直接传参  
> · 通过自定义属性的方式传递参数》data-opration="\{ \{1\}\}"  
> · 在事件源中获取属性

Page({ 
      data: { 
        num: 0
      },
      // 输入框的input事件的执行逻辑
      handleInput(e) { 
        console.log(e)
        console.log(e.detail.value)
        this.setData({ 
          num: e.detail.value
        })
      },
      // 绑定事件
      handleTap: function (e) { 
        console.log(e)
        //获取自定义属性operation
        const operation = e.currentTarget.dataset.opration;
        this.setData({ 
          num: this.data.num + operation
        })
      }
    })

##### view #####

<view hover-class="ho-class">点我试试</view>
     <view>
          <view hover-stop-propagation="true">点我试一试</view>
     </view>

##### text #####

//长按文字复制 - selectable
      //文本解码- decode
      //user-select 文本是否可选
    <text selectable decode user-select="true">
    	  text 122
      </text>

##### image #####

//image
      //图片标签  image默认宽320px 高240px
      //支持懒加载 lazy-load 自己判断当图片出现在视口  上下三屏的高度的时候，会加载图片
      
      //建议使用线上的图片
       //打包上线不能超过2M
       
       <image src="https://**" mode="aspectFit" lazy-load="true"></image>

##### swiper #####

> 轮播图外层容器swiper  
> 每一个轮播项 swiper-item  
> swiper标签 存在默认样式  
> width 100%  
> height 150px  
> swiper的高度无法实现由内容撑开  
> 先找出原图片的宽度和高度 等比例的条件下给swiper设置高度
> 
>     原图：534 *300px
>     
>     swiper高度 /swiper宽度    = 图片高度 / 图片宽度 
>     
>     h / 100vw = 300/534
>     h=100vw * 300 / 534
> 
> autoplay 为true时自动轮播，默认5s  
> interval 设置轮播时间  
> circular 循环轮播，衔接轮播  
> indicator-dots 显示指示器 分页器 索引器

//wxml
     <swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-active-color="green" indicator-color="#f0f">
        <swiper-item>
            <image mode="widthFix" src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
        </swiper-item>
        <swiper-item>
            <image mode="widthFix" src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
        </swiper-item>
        <swiper-item>
            <image mode="widthFix" src="https://dev.sgcctd.cn/oss/filemag/getFileById?fileId=5f6413f5e7d4bb00083b34d2"></image>
        </swiper-item>
     </swiper>

//wxss swiper{ 
      height: calc(100vw * 300 /534)
    }
    image{ 
      width: 100%
    }

##### navigator #####

> 块级元素 默认会换行 可设置宽高  
> url 跳转的路径（绝对或相对）  
> 1、target 要跳转到当前小程序还是其他的小程序页面  
> · self 默认值 自己  
> · miniProgram 其他小程序  
> 2、open-type 跳转方式  
> · navigate 默认值 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 ，保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面  
> · redirect 对应 wx.redirectTo 的功能 ,关闭当前页面，跳转到应用的某个页面，但是不允许跳转到tabber页面  
> · switchTab 对应 wx.switchTab 的功能 ，跳转到tabbar页面，并关闭其他所有非tabbar页面  
> · reLaunch 对应 wx.reLaunch 的功能 1.1.0，关闭所有页面，打开到应用内的某个页面  
> · navigateBack 对应 wx.navigateBack 的功能 1.1.0，关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈  
> · exit 退出小程序，target="miniProgram"时生效 2.1.0，退出小程序，target="miniProgram"时生效

<navigator url="/pages/demoSwiper/demoSwiper" target="self">轮播</navigator>
    <navigator open-type="redirect" url="/pages/demoSwiper/demoSwiper" target="self">redirect 不允许跳到tabbar</navigator>
    <navigator url="/pages/demoSwiper/demoSwiper" target="self">switchTab允许跳到tabbar</navigator>

##### rich-text #####

> 1、nodes 属性来实现  
> ·接收标签字符串:常用  
> · 接收对象数组  
> 2、space  
> ensp中文字符空格一半大小  
> emsp中文字符空格大小  
> nbsp根据字体设置的空格大小

//wxml
    <rich-text nodes="{ {urlStr}}"></rich-text> 
     <rich-text nodes="{ {html}}"></rich-text>

//js
     Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        html:[{ 
          // div标签 name属性来指定
          name:"div",
          // 标签上有哪些属性
          attrs:{ 
            // 标签上的属性 class style
            class:"my-div",
            style:"color:red;"
          },
          //子节点 children 要接收的数据类型 和 nodes 第二种渲染方式的数据类型一致
          children:[{ 
            name:"p",
            attrs:{ },
            //放文本
            children:[{ 
              type:"text",
              text:"hello"
            }]
          }]
        }],
        urlStr:'<div class="sc-ifAKCX iLINIY"><a class="sc-EHOje jXFKFG" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&spm=a2141.1.iconsv5.1&scm=1007.home_icon.tmallxp.d&wh_biz=tm&disableNav=YES"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">天猫新品</p></a><a class="sc-EHOje hrPgER" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&spm=a2141.1.iconsv5.6&scm=1007.home_icon.chongzzx.d&_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&subSource=stcz_1"><img class="sc-bZQynM iEnsRn" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-gzVnrw hKaypx">充值中心</p></a></div>'
      },
      })

##### button #####

> button  
> 1 size 按钮大小  
> default  
> mini  
> 2 type 按钮的颜色  
> default 白色  
> primary 绿色  
> warn 红色  
> 3 plain 背景色无，是否镂空，只显示边框  
> 4 loading 是否显示加载中  
> 5 form-type  
> submit 提交表单  
> reset 重置表单  
> 6 按钮开放能力 open-type

*  contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 1.1.0;  
    ·**需要在微信小程序的后台配置**
    
     *  share 触发用户转发，使用前建议先阅读使用指引 1.2.0；  
        ·**不能把小程序分享到朋友圈**
     *  getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0；  
        **·不是企业的小程序账号，没有权限来获取用户的手机号码**  
        *1 需要绑定一个事件 bindgetphonenumber  
        2 在事件的回调函数中，通过参数来获取信息  
        3 获取到的信息是加密的*  
        · **需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序，就能看到信息了**
     *  getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0  
        *1 bindgetuserinfo  
        2 可以直接获取信息，不存在加密字段*
     *  launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5  
        *1 先在app中，通过app的某个链接 打开小程序  
        2 在小程序中打开app  
        3 如 找到京东app和京东小程序测试*
     *  openSetting 打开授权设置页 2.0.7  
        *1 授权页面中只会出现用户曾经点击过的权限*
     *  feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0  
        **只能通过真机打开**

<button>default</button>
    <button size="mini">mini</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>
    <button type="primary" plain>plain</button>
    <button type="primary" loading>loading</button>
    
    <button form-type="submit">submit</button>
    <button form-type="reset">reset</button>
    
     <button open-type="contact">contact</button>
     <button open-type="share">share</button>
     <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
     <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
     <button open-type="launchApp">launchApp</button>
     <button open-type="openSetting">openSetting</button>
     <button open-type="feedback">feedback</button>

// pages/demoButton/demoButton.js
    Page({ 
      // 获取用户的手机号码信息
      getPhoneNumber: function (e) { 
        console.log(e)
      },
      // 获取用户个人信息
      getUserInfo: function (e) { 
        console.log(e)
      }
    })

##### icon #####

Page({ 
      data: { 
        iconSize: [20, 30, 40, 50, 60, 70],
        iconColor: [
          'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
        ],
        iconType: [
          'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
        ]
      }
    })

<view class="container">
    	<view class="icon-box">
    		<icon class="icon-box-img" type="success" size="93"></icon>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">成功</view>
    			<view class="icon-box-desc">用于表示操作顺利完成</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<icon class="icon-box-img" type="info" size="93"></icon>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">提示</view>
    			<view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">普通警告</view>
    			<view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<icon class="icon-box-img" type="warn" size="93"></icon>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">强烈警告</view>
    			<view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<icon class="icon-box-img" type="waiting" size="93"></icon>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">等待</view>
    			<view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="success_no_circle" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">多选控件图标_已选择</view>
    			<view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="circle" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">多选控件图标_未选择</view>
    			<view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="warn" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">错误提示</view>
    			<view class="icon-box-desc">用于在表单中表示出现错误</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="success" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">单选控件图标_已选择</view>
    			<view class="icon-box-desc">用于单选控件中，表示已选择该项目</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="download" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">下载</view>
    			<view class="icon-box-desc">用于表示可下载</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="info_circle" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">提示</view>
    			<view class="icon-box-desc">用于在表单中表示有信息提示</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="cancel" size="23"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">停止或关闭</view>
    			<view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
    		</view>
    	</view>
    	<view class="icon-box">
    		<view class="icon-small-wrp">
    			<icon class="icon-small" type="search" size="14"></icon>
    		</view>
    		<view class="icon-box-ctn">
    			<view class="icon-box-title">搜索</view>
    			<view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
    		</view>
    	</view>
    </view>

.icon-box { 
    	width: 100%;
    	display: flex;
    	border-bottom: 1px solid #ddd;
    	/* justify-content: space-between; */
    	align-items: center;
    	padding: 10px;
    	box-sizing: border-box;
    }
    .icon-small-wrp{ 
    	width:25%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }
    .icon-box-title{ 
    	margin-bottom: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 4]

![在这里插入图片描述][20201014162239215.png_pic_center]

##### radio #####

> radio
> 
> radio标签 必须要和父元素radio-group来使用  
> value 选中的单选框的值  
> 需要给radio-group绑定change事件 在页面中显示 选中的值

<radio-group bindchange="changeRadioSex">
        <radio value="male" color="red" checked="true">男</radio>
        <radio value="femal" color="red" >女</radio>
     </radio-group>
    
     <view>您选中的是：{
       {gender}}</view>

//wx.showToast 弹窗提示
    Page({ 
    	data: { 
    		gender: "male"
    	},
    	changeRadioSex: function(e) { 
    		this.setData({ 
    			gender: e.detail.value
    		})
    		if (e.detail.value == "male") { 
    			wx.showToast({ 
    				title: "男"
    			})
    		} else { 
    			wx.showToast({ 
    				title: "女"
    			})
    		}
    
    	}
    })

##### checkbox #####

<view>
      
      <checkbox-group bindchange="changeCheckbox">
        <checkbox value="{ {item.value}}" wx:for="{ {list}}" wx:key="id">{
       {item.name}}</checkbox>
      </checkbox-group>
      
    </view>
    
    <view>
    您选中的有：{
       {checkList}}
    </view>

Page({ 
      changeCheckbox:function(e){ 
        console.log(e)
        this.setData({ 
          checkList:e.detail.value
        })
      },
    
      /** * 页面的初始数据 */
      data: { 
        checkList:[],
        list:[
          { 
            id:0,
            name:"苹果",
            value:"apple"
          },
          { 
            id: 1,
            name: "葡萄",
            value: "grape"
          },
          { 
            id: 3,
            name: "香蕉",
            value: "banana"
          }
        ]
      },
    })

## 小程序基础学习篇------2020-10-10 ##

hbuildx可以新建小程序项目  
![在这里插入图片描述][20201010110421518.png_pic_center]

#### 小程序目录结构： ####

##### 1、微信开发者工具 #####

![在这里插入图片描述][20201010104252254.png_pic_center]

##### 2、hbuilderx的目录结构 #####

![在这里插入图片描述][20201010104252223.png_pic_center]

#### 公共配置文件： ####

##### app.js #####

//app.js
    App({ 
      onLaunch: function () { 
        // 展示本地存储能力
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    
        // 登录
        wx.login({ 
          success: res => { 
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({ 
          success: res => { 
            if (res.authSetting['scope.userInfo']) { 
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
              wx.getUserInfo({ 
                success: res => { 
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) { 
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      },
      globalData: { 
        userInfo: null
      }
    })

##### app.json #####

{ 
    	"pages": [
    		"pages/dataBind/dataBind",
    		"pages/index/index",
    		"pages/logs/logs"
    	],
    	"window": { 
    		"backgroundTextStyle": "light",
    		"navigationBarBackgroundColor": "#fff",
    		"navigationBarTitleText": "WeChat",
    		"navigationBarTextStyle": "black"
    	},
    	"sitemapLocation": "sitemap.json"
    }

##### app.wxss 公共样式 #####

> pages 数组的页面路径，放在第一个的页面最先展示

##### project.config.json #####

{ 
    	"description": "项目配置文件。",
    	"packOptions": { 
    		"ignore": []
    	},
    	"setting": { 
    		"urlCheck": true,
    		"es6": true,
    		"postcss": true,
    		"minified": true,
    		"newFeature": true
    	},
    	"compileType": "miniprogram",
    	"libVersion": "2.0.8",
    	"appid": "touristappid",
    	"projectname": "test-first",
    	"simulatorType": "wechat",
    	"simulatorPluginLibVersion": { },
    	"condition": { 
    		"search": { 
    			"current": -1,
    			"list": []
    		},
    		"conversation": { 
    			"current": -1,
    			"list": []
    		},
    		"game": { 
    			"currentL": -1,
    			"list": []
    		},
    		"miniprogram": { 
    			"current": -1,
    			"list": []
    		}
    	}
    }

##### sitemap.json #####

{ 
      "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
      "rules": [{ 
      "action": "allow",
      "page": "*"
      }]
    }

在单个页面的js中配置：

Page({ 
      data: { 
        motto: 'Hello',
    	isGirl:false,
        userInfo: { 
    		name:"nihao"
    	},
        isChecked: true,
    	list:[{ 
    		id:0,
    		name:"joken"
    	},{ 
    		id:1,
    		name:"lucy"
    	}]
      }
      })

###### 数据绑定 ######

类似vue用\{ \{\}\}  
下面的这种写法是错误的写法【引号和括号之间不能有空格】

<view>
    	{
       {motto}}
    </view>
    <view>
    	{
       {userInfo.name}}
    </view>
    <view>
    	<checkbox checked="{ {isChecked}}"></checkbox>
    </view>

![在这里插入图片描述][20201010104656661.png_pic_center]

###### 运算 ######

运算，即表达式

> 1、加减运算  
> 2、拼接  
> 3、三目运算

<view>
    	 {
       {1+1}}
     </view>
     <view>
     	 {
       {"1"+"1"}}
     </view>
     <view>
     	 {
       {"1"+1}}
     </view>
     <view>
    	 {
       {isGirl?"女孩":"不是女孩"}}
     </view>

![在这里插入图片描述][20201010104724996.png_pic_center]

###### 列表循环 ######

列表循环  
1、数组或者对象循环  
  
2、数组循环：**wx:key="唯一"**  
**wx:for-item=“数组的项” wx:for-index="数组的索引"**  
*只有一层循环的时候可不写，  
当多层嵌套循环的时候，双引号的变量名不能一样*

3、对象循环：**wx:key="唯一"**  
**wx:for-item=“对象的值” wx:for-index="对象的键"**

<view>
    	 <view wx:for="{ {list}}" wx:key="id">
    		 数组循环：
    		 索引：--{
       {index}}
    		 值：--{
       {item.name}}
    	 </view>
     </view>
     
     <view>
     	 <view wx:for="{ {userInfo}}" wx:for-item="value" wx:for-index="key" wx:key="name">
     		 对象循环：
     		 键：--{
       {key}}
     		 值：--{
       {value}}
     	 </view>
     </view>

![在这里插入图片描述][20201010104846225.png_pic_center]

###### block标签 ######

> block【占位，运行结果小程序会忽略该标签】

<view>
    	 <block wx:for="{ {list}}" wx:key="id">
    		 数组循环：
    		 索引：--{
       {index}}
    		 值：--{
       {item.name}}
    	 </block>
     </view>

![在这里插入图片描述][20201010105004716.png_pic_center]  
![在这里插入图片描述][20201010105004713.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/96adff9335f0433cbb5b2e1edc98742f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/cb7a59ce9ac4439595dbade02874a853.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5ca6e23d916645379f924aaec985b543.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/940c0ee792fb4408912baba3a0959c75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/a87b6970a34641048f20ad0bc41f98f7.png
[20201014162239215.png_pic_center]: /images/20221123/ba0cff76f4084367aa3fa499733ae87b.png
[20201010110421518.png_pic_center]: /images/20221123/23b7baf1125b447e925be98a2c0a4c22.png
[20201010104252254.png_pic_center]: /images/20221123/dec972d316e0427192192bea4e49e129.png
[20201010104252223.png_pic_center]: /images/20221123/173b9e1cf1d74d88b60a8b19074150c0.png
[20201010104656661.png_pic_center]: /images/20221123/63d64656690e473ba116f592f6bc5713.png
[20201010104724996.png_pic_center]: /images/20221123/d2899f53161c4c069003c7d9c6fb5e77.png
[20201010104846225.png_pic_center]: /images/20221123/3e30feebae644c47b4da410b3a54dfee.png
[20201010105004716.png_pic_center]: /images/20221123/a83e553cb7494476b8683d64d230b673.png
[20201010105004713.png_pic_center]: /images/20221123/5f03ce431d8d4b6b8248068596b3c940.png