小程序常用知识点

一、素材整理

1. 图片素材过多可将图片上传到云开发控制台的存储中，具体步骤如下：
   (1) 打开云开发
   
   (2) 点击存储
   
   (3) 点击上传文件
   
   (4) 选择文件并上传
   (5) 获取文件的云路径
   

2. 音乐素材：《琵琶行》https://sharefs.yun.kugou.com/202009172010/c377aa9de47190bc7c1c90818f74cc6f/G168/M00/11/09/SIcBAF0UvIWAJtU5AHjuirfn_XU221.mp3

3. 素材的使用

   (1) 图片素材：复制素材的下载地址，在 page.wxml 文件中编写 image 组件的 src 属性，属性值为图片素材的下载地址，直接粘贴即可。

   (2) 音乐素材：首先在 page.js 中声明变量存放 InnerAudioContext 实例：

   var music = wx.createInnerAudioContext();
   

   然后使用实例变量调用其属性和方法：

   music.src = ".mp3";
   music.loop = true;
   music.play();
   

   点击进入 官方文档

二、常用的 CSS 样式

1. flex 布局 点击进入

2. 动画的使用 菜鸟教程 W3C

   (1) 定义动画：关键字 @keyframes

   @keyframes turn
   {
   	0%{-webkit-transform:rotate(0deg);}
   	50%{-webkit-transform:rotate(180deg);}
   	100%{-webkit-transform:rotate(360deg);}
   }
   

   (2) 引用动画：定义 CSS 类选择器或 id 选择器

   @keyframes turn
   {
   	animation:turn 2s linear infinite;
   	animation-play-state: running;
   }
   

   注：animation-play-state 属性常用的两个值（running / paused）分别表示开始动画和暂停动画，通常应用在控制循环动画的运行和暂停。

3. 背景图片

   <!-- 外层盒子容器，作为整体的父元素，使用相对定位 -->
   <view class="SevenOne">
   
   	<!-- 本张图片为背景图片，基本样式包括：绝对定位、宽高铺满父元素、z-indx: 0 -->
   	<image src="{{imageUrl.backImage}}" class="back_image"></image>
   
   	<!-- 页面内容容器，基本样式：绝对定位、宽高铺满父元素、z-indx: 1 -->
   	<view class="content">内容</view>
   	
   </view>
   

4. 控制文本显示

   /*overflow 属性规定当内容溢出元素框时发生的事情。*/
   overflow: hidden;
   
   /*white-space 规定段落中的文本不进行换行：*/
   white-space: nowrap;
   
   /*text-overflow 属性规定当文本溢出包含元素时发生的事情*/
   text-overflow: ellipsis;
   

5. 奇偶行不同样式

   /*奇数行样式*/
   .mod:nth-child(odd)
   {
   	background-color: #e6e6e6;
   }
   /*偶数行样式*/
   .mod:nth-child(even)
   {
   	background-color: #ffffff;
   }
   

三、常用的 JS 逻辑

1. 封装函数：利用封装函数可以大大减少代码量，可以的公共的代码封装到函数中，在其他函数中使用 this.函数名(实参) 的方式调用封装函数。如例：

   // 封装函数，请求接口获取商品列表数据(参数表示页码和每页商品数量)
   	shopList:function(page,pageSize)
   	{
   		wx.request({
   			url:"http://116.62.201.243:8080/wxxcx/goods/getGoodsByPage",
   			data:{
   				page:page,
   				pageSize:pageSize
   			},
   			method:"POST",
   			success:(res) => {
   				var showList = res.data.data;
   				this.setData({
   					shopList:showList
   				})
   			}
   		})
   	},
   	
   	/**
   	 * 生命周期函数--监听页面加载
   	 */
   	onLoad: function (options) {
   		this.shopList("1","10");
   	},
   	
   	/**
   	 * 页面上拉触底事件的处理函数
   	 */
   	onReachBottom: function () {
   		page++;
   		var pageSize = page*10;
   		pageSize = pageSize.toString();
   		this.shopList("1",pageSize);
   	},
   

2. 封装生成 [0,9] 随机数的函数

   rand:function()
   	{
   		var rand = Math.floor(Math.random() * 9);
   		return rand;
   	},
   

四、常用组件（点击进入官方文档）

1. scroll-view：可滚动视图区域。
2. swiper：轮播图组件。
3. swiper-item：swiper 组件的子元素。
4. view：视图容器。
5. progress：进度条组件。
6. form：表单组件。

五、常用API（点击进入官方文档）

1. wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
2. wx.navigateTo：保留当前页面，跳转到应用内的某个非 tabBar 页面。
3. wx.reLaunch：关闭所有页面，打开到应用内的某个页面。
4. wx.showToast：显示消息提示框，如图：
   
5. wx.showModal：显示模态对话框，如图：

6. wx.showActionSheet：显示操作菜单，如图：

7. wx.request：发起 HTTPS 网络请求。

8. wx.setStorage：存入缓存。

9.wx.getStorage：取出缓存。

10.wx.clearStorage：清理本地数据缓存。

六、用户授权

1. 通常情况下用户授权是在首页的加载事件中编写的，且执行一次。
2. 首先通过 wx.getSetting API 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
3. 在 wx.getSetting API 执行成功的回调函数中判断用户是否开启某项权限，通过 res.authSetting 获取权限列表，若用户已开启相关权限则继续执行后面的程序；若未开启相关权限，返回值为 undefined 或 false，这时使用 wx.authorize API 向用户申请权限。
4. 在 wx.authorize API 的参数中，scope 是必填项，表示需要获取权限的 scope。

七、其它

1. JS 与 JSON 互转
   （1）JS 对象/数组 转 JSON

   // data 表示 JS 对象/数组
   JSON.stringify(data);
   

   （2）JSON 对象 转 JS

   JSON.parse(data)