样式

尺寸单位

当屏幕宽度等于 750px 时，1px = 1rpx

当屏幕宽度等于375px时， 1px =0.5rpx

样式导入只支持相对路径

选择器（微信小程序不支持通配符）

小程序的内置组件

小程序中常用的布局组件：

view,text,rich-text,button,image,icon,swiper,radio,checkbox等。
复制代码

1. view标签 相当于 div标签

2. text标签 只能嵌套text标签 长按文字可以复制【selectable】（只有这个标签有这个功能） 可以对回车,空格进行编码 (decode)

3. image标签 （打包上线的大小不能超过2M，使用图片的时候统一使用外网图片）

   1. 图片存在默认的宽高（320px * 240px）

   2. mode 决定 图片内容 和 图片标签 做适配

      scaleToFill 默认值 不保持纵横比，拉伸至标签定义的宽高

      aspectFit 保持宽高比，保证图片的长边完全显示（常用 轮播图）

      aspectFill 短边完全显示

      widthFix 宽度不变，高度自动变化，保持原宽高比不变

      top，left，bottom，right 背景图定位

   3. 小程序中的图片 直接支持 懒加载

      lazy-load 会自己判断 当图片出现在视口的上下三屏之内的时候，自己开始加载图片

4. swiper标签 ---》 轮播图

   swiper高度 = swiper的宽度 * 图片的高度 / 原图的宽度

   <swiper autoplay interval="1000" circular indicator-dots>
       // 图片存在默认宽高  320 * 240
   	<swiper-item><image model="widthFix" src="" /></image></swiper-item>
   </swiper>
   复制代码
   

5. navigator 导航组件 (块级元素，默认换行)

   <navigator url="/pages/homepage/index" open-type="navigate"></navigator>
   复制代码
   

6. rich-text(富文本标签，将字符串解析成对应标签，相当于v-html)

   // 1 标签字符串
   <rich-text nodes="{{ html }}"></rich-text>
   
   // 2 对象数组
   <rich-text nodes="{{ html.model }}"></rich-text>
   复制代码
   

7. button 按钮

   大小（size:mini/default），颜色(type:default/primary/warn)，是否镂空（plain），是否在文字前有加载loading（loading），开发能力（opentype）

   开放能力（opentype）:

   1. concat 直接打开 客服对话 功能，需要在小程序的后台配置

      1. 将小程序的appid由测试号改为自己的appid
      2. 登录微信小程序官网，添加 客服 - 微信

   2. share 转发当前小程序到微信朋友中 ，不能把小程序转发到朋友圈中

   3. getPhoneNumber 获取当前用户的手机号码，结合事件来使用，不是企业的小程序账号 没有权限来获取用户的手机号码

   4. getUserInfo获取用户的个人信息

   5. launchApp在 小程序 中直接打开 app

   6. openSetting 打开小程序内置的授权页面

      只会出现用户点击过的权限

   7. feedback 打开小程序内置的意见反馈页面

8. icon

   type：类型 success，success_no_circle,info,warn,wating.success_no_circle,info,warn,waiting，cancel,downkload，search，clear

   size：大小 number / string

   color：颜色

9. radio 单选框

   <radio-group bindchange="handleChange">
   	<radio color="red" value="male">男</radio>
       <radio color="red" value="female">女</radio>
   </radio-group>
   <view>选中的是： {{ gender }} </view>
   
   data：{
   	gender: ""
   },
   handleChange(e) {
   	// 获取单选框选中的值
   	let gender = e.detail.value;
   	// 把值赋值给data中的数据
   	this.setData({
   		gender // 相当于 gender：gender
   	})
   }
   复制代码
   

10. checkbox 多选框

    <checkbox-group bindchange="handleChange">
    	<checkbox value="{{ item.value }}" wx:for="{{ list }}" wx:key="id">{{ item.name }}		     </checkbox>
    </checkbox-group>
    <view>选中的是： {{ checkedList }} </view>
    
    checkedList:[]
    handleChange(e) {
    	let checkedList = e.detail.value;
    	this.setData({
    		checkedList
    	})
    }
    复制代码
    

小程序的生命周期

应用生命周期

触发过程：

onLaunch -》 onShow

App({
    // 1 应用 第一次启用的时候触发
    onLaunch() {
        // 在应用第一次启动的时候 获取用户信息
    }
    
    // 2 应用 被用户看到的时候触发
    onShow() {
    	// 常用于小程序界面之间的切换
    	// 对应用的数据或者页面的效果进行重置
	}

	// 3 应用 被隐藏的时候触发
	onHide() {
        // 暂停或者清楚定时器
    }

	// 4 应用 代码发生报错的时候  执行
	onError() {
        // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误信息发送到后台去
    }

	// 5 页面找不到的时候就会触发
	// 应用第一次启动的时候，如果找不到第一个入口页面，才会触发
	onPageNotFound() {
        // 如果页面不存在了  通过js的方式来重新跳转页面  重新跳转到第二个首页
        // 不能跳转到tabbar页面  导航组件类似
        wx.navigateTo({
            url: "/pages/demo02/index"
        })
    }
})
复制代码

页面生命周期

onLoad -> onShow -> onReady

Page({
    data: {
        
    },
    onLoad: function(options) {
        // onload发送异步请求来初始化页面数据
    },
    onShow: function() {
        // 页面显示加载
    },
    onReady: function() {
        // 页面初次渲染完成
    },
    onHide: function() {
        // 页面隐藏时加载  一个页面跳转到另外一个页面也会触发onHide事件
    },
    onUnload: function() {
        // 页面卸载  也可以通过超链接   关闭当前页面就会触发onUnload事件
        // <navigator url="/pages/demo01/demo01" open-typr-redirect>demo01</navigator>
        
        // 关闭当前页面就代表着卸载页面
    },
    onPullDownRefresh: function() {
        // 监听用户下拉事件  "enablePullDownRefresh":true
        //  页面效果的重新加载
    },
    onReachBotton: function() {
        // 监听用户上拉触底事件   【需要让页面出现上下的滚动才行】
        // 常用于  上拉加载下一页操作
    },
    onShareAppMessage: function() {
        // 用户点击右上角转发
    },
    onPageScroll: function() {
        // 页面滚动就触发
    },
    onResize: function() {
        // 页面尺寸发生变化的时候触发   
        // 常指 手机横屏竖屏的时候  触发    
        //  app.json中添加   "pageOrientation":"auto"
    },
    onTabItemTap: function() {
        // 1. 当前页面必须为tabbar页面
        // 2. 点击的是自己的tab  item的时候才触发
    }
})
复制代码

小程序自定义组件

步骤：

1. 创建

2. 声明（那个页面要使用自定义组件，就在那个页面的json文件中声明）

   {
       "usingComponents": {
           "Tabs": "../../components/Tabs/Tabs"
       }
   }
   复制代码
   

3. 使用

   <Tabs></Tabs>
   复制代码
   

注意：

• 页面的.js文件中，存放事件回调函数的时候，存放在data同层级下

• 组件的.js文件中，存放时间的回调函数的时候，存放在methods中

• 在小程序中不要直接通过this.data.x.来修改数组的值（建议先拷贝一份数组，然后再对拷贝的数组进行修改）

  let tabs = JSON.parse(JSON.stringify(this.data.tabs));
  
  let tabs = this.data;