微信小程序入门(更新中)

微信小程序与普通网页开发的区别

1. 网页开发渲染线程和脚本线程是一个进程。而小程序二者是分开的，分别运行在不同的线程。
2. 网页开发者可以操作DOM和BOM。小程序缺少操作DOM和BOM的方法。导致了JQ、Zepto等，在小程序中无法运行。
3. 小程序的运行环境与nodejs环境也不相同，所以一些npm包在小程序中无法运行。
   • 从小程序基础库版本2.2.1开始支持使用npm安装第三方包。

小程序开发流程

1. 注册小程序账号

   为了获取AppID，AppID就像我们的身份证一样，是唯一且很重要的，后续的所有开发流程都会基于这个AppID来完成。

   • 注册方式：
     • 直接在微信小程序的官网注册
     • 通过微信公众号注册
       • 条件是已经有微信公众号(企业级，个人不可以)
       • 有点事如果公众号已经认证过了，小程序不需要再次认证，省去了认证的时间和费用。
2. 安装开发者工具
3. 开发、测试、上传代码(上传到微信服务器)
4. 提交审核
5. 发布上线 发布小程序以后，我们才可以在微信中搜索到我们开发的小程序
6. 错误查询/性能监控 登陆官网 -> 开发 -> 运维中心

开发基础

一、语法

数据绑定

1. 内容

<view>{{title}}</view>
Page({
	data: {
		message: 'hello'
	}
})

2. 属性(需要在双引号内)

<view id="{{id}}"></view>
Page({
	data: {
		id: '001'
	}
})

3. 运算符

	<view hidden="{{flag ? true :  false}}"> Hidden </view>

4. 其他

<view>{{"hello" + name}}</view>
<view>{{name}}{{age}}</view>

条件语句

1. wx:if
2. wx:elif
3. wx:else

<view wx:if="{{a > 5}}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else">5</view>

for循环

• wx:for
• 默认数组的当前项的下表变量名默认为index，数组当前项的变量默认为item
• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名
• wx:for 可以嵌套
• wx:key的意思：为了额列表中遍历的每一个元素指定一个唯一的标识。当数据改变触发渲染层重新渲染的时候，确保使组件保持自身状态并提高列表渲染时的效率。

1. 如果被遍历的数组的元素是object，我们可以使用他的某一个值，这个值必须是不重复的数组或者字符串。
2. 如果被遍历的数组中的元素是数组或者字符串 *this达标在for循环中item本身。

• 举例：

假设有数据和视图分别为：

	data: {
		str: 'abcdefg',
		lesson: [
			{
				id: 0,
				image: './0.png',
			},
			{
				id: 1,
				image: './1.png',
			},
			{
				id: 2,
				image: './2.png',
			}
		]
	},

	<view wx:for="{{leeson}}" wx:key="id">
		注意：上面的wx:key的值为对应的属性，直接写属性的名称key即可,只要这个key是唯一标识
		{{item}}{{index}}
	</view>
	
	<view wx:for={{str}} wx:key="*this">
		注意：如果遍历的是字符串，那么可以使用*this来作为唯一标识
		{{item}}{{index}}
	</view>
	
	<view wx:for={{str}} wx:key="*this" wx:for-item="s" wx:for-index="n">
		注意：如果想更改默认每项的变量item，可以使用wx:for-item="{{s}}"，这样s就能代替item了，同理，如果想更改每项的索引index，可以使用wx:for-index="n"，这样n就能代替index了。
		{{s}}{{n}}
	</view>

block组件

容器的作用，在页面渲染的时候，不会显示block标签，类似react的<></>

<block>
	...
</block>

事件、事件绑定和事件对象

事件对象可以携带额外信息，如id，dataset

• 事件

  • touchstart 手指触摸动作开始
  • touchmove 手指触摸后移动
  • touchcancel 手指触摸动作被打断，如来电提醒，弹窗
  • touchend 手指触摸动作结束
  • tap 手指触摸后马上离开
  • longpress 手指触摸后，超过350ms在离开，如果指定了时间回调函数并处罚金了这件事，tap事件将不被触发
  • longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
  • transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
    － animationstart 会在一个 WXSS animation 动画开始时触发
    － animationiteration 会在一个 WXSS animation 一次迭代结束时触发
    － animationend 会在一个 WXSS animation 动画完成时触发
    － touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

• 事件分类

  • 冒泡事件
  • 非冒泡事件

• 事件绑定

  • 写法：key、value的形式 ，value不用写()
  • key 以 bind 或 catch开投，然后跟上事件的类型，如bindtap、catchtap

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

• 事件对象
  • type 代表事件的类型
  • timeStamp 页面打开到触发事件所经过的毫秒数
  • target 触发事件的源组件
  • currentTarget 事件绑定的当前组件

data-xxx自定义属性的大小写问题

• data－info 属性是info
• data－inFo 属性是info
• data－in－fo 属性是inFo

开发进阶

路由

• wx.navigateBack 返回
• wx.switchTab 跳转到tabbar的页面
• wx.navigateTo 跳转到另一个页面
• wx.reLaunch 关闭其他所有页面，只跳转到某一个页面
• wx.redirectTo 关闭当前的页面，但不允许关闭tabbar的页面

开发高级

一、获取用户授权(信息)

1.直接在页面展示用户信息，但不能在js获取到用户数据

• 使用open-data内置组件，type属性表示需要展示的用户信息类型，比如头像，暱称等。具体有哪些用户信息，参考文档。

	<open-data type="userAvatarUrl"></open-data>
	<open-data type="userNickName"></open-data>

2.在js获取用户信息

• 微信要求button点击后才可以获取,所以需要有一个按钮，并且在按钮上绑定open-type="getUserInfo"属性和属性值，同时，通过bindgetuserinfo事件来获取用户信息

	<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

	getUserInfo: (event) => {
		if (e.detail.errMsg === "getUserInfo:ok") {
		  this.setData({
			userAvatarPic: e.detail.userInfo.avatarUrl,
			userNickName: e.detail.userInfo.nickName,
		  })
		} else {
		  console.log("授权失败");
		}
	}

• 当然，如果用户已经授权过，那么一开始进入页面，就可以调取接口获取到是否已经授权，如果授权，则获取用户信息。
  • 在这里，我们可以在onLoad声明周期函数中通过wx.getUserInfo调取用户信息

	Page({
		/**
		* 页面的初始数据
		*/
		data: {
			userAvatarPic: "",
			userNickName: '',
		},
		onLoad: (options) => {
			wx.getUserInfo({
				success: (res) => {
					this.setData({
					  userAvatarPic: res.userInfo.avatarUrl,
					  userNickName: res.userInfo.nickName,
					})
				}
			})
		},
	})

• 也可以通过wx.getSetting接口来判断是否已经授权
  • res.authSetting[‘scope.userInfo’]为true表示已经授权。

Page({
	onLoad: (options) => {
		wx.getSetting({
			success: (res) => {
				if(res.authSetting['scope.userInfo']){
					console.log('已经授权，可以显示用户信息');
				}else{
					console.log("尚未授权，显示授权按钮");
				}
			}
		})
	}
})

tabbar的配置

• 在app.json中配置tabbar

{
	"pages": [
		"pages/index/index",
		"pages/home/home",
		"pages/my/my"    
	],
	"tabBar": {
		"color": "#7a7e83", // 未被选中时的文字颜色
		"selectedColor": "#e94840", // 被选中时的文字颜色
		"borderStyle": "black", // tabbar上边框的颜色，仅支持black/white
		"position": "bottom", // tabber位置，仅支持bottom/top，默认bottom，当为top时，不显示图标
		"backgroundColor": "#fff", // 菜单背景色
		"list": [{// 这个list，也就是tabbar的菜单限制为2-5个，包含2和5
		  "pagePath": "pages/home/home",
		  "text": "首页",
		  "iconPath": "", // icon路径
		  "selectedIconPath": "" // 选择了icon的路径
		},{
		  "pagePath": "pages/my/my",
		  "text": "我的",
		  "iconPath": "",
		  "selectedIconPath": ""
		}]
	}
}

头部导航样式配置

• 在app.json文件中，配置一个window属性

	{
		"pages": [
			"pages/index/index",
			"pages/home/home",
			"pages/my/my"    
		],
		"window": {
		    "navigationBarBackgroundColor": "#ffffff", // 顶部导航条的背景颜色
		    "navigationBarTextStyle": "black",// 顶部导航文字的颜色，只有black/white两种颜色
		    "navigationBarTitleText": "无止课堂",// 顶部导航的标题
		    "backgroundColor": "#eeeeee",
		    "backgroundTextStyle": "light",
		    "enablePullDownRefresh": false
		},
	}

• 特别注意：页面的json文件，能配置window属性，其他pages,tabbar都是不可以的,并且写window的配置时候，不用写window，直接写属性即可，例如

{
    "navigationBarBackgroundColor": "#ef2046",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "个人中心",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
}

网络超时设置

• 在app.json中，配置networkTimeout属性

	{
		"pages": [
			"pages/index/index",
			"pages/home/home",
			"pages/my/my"    
		],
		"newtworkTimeout": { // 默认都是20s
			"request": 20000, // 请求超时
			"connectSocket": 20000, // 连接超时
			"uploadFile": 20000, // 文件上传超时
			"downloadFile": 20000 // 文件下载超时
		}
	}