微信小程序开发入门

1.微信开发概述

微信开发即将企业信息、服务、活动等内容通过微信网页的方式进行表现，用户通过简单的设置，就能生成微信网站（如微信订阅号、服务号、企业账号、微信小程序等）
目的

企业开发的需要，使自己更加符合企业发展的需求
个人（开发者）的发展以及技能的提升
发展前景大、生态系统丰富

2.小程序概述

微信小程序，Wechart Mini Progream是一种不需要下载安装即可使用的应用，是一种新的开发能力，开发者可以快速地开发一个小程序，小程序可以再微信内被便捷地获取和传播，同时具有出色的使用体验

应用场景

适合一些轻量级、即开即用、用完即走的应用

亮点与不足
亮点

对于用户而言：
不需要下载，节省了手机内存，使用方便，即开即用
打开速度比普通的H5要块，接近原生App
对于开发者而言：
功能上媲美原生app，比h5强大
成本上比原生app低（时间，服务器资金），接近h5应用开发成本
入门门槛较低，掌握基本的html、css、js语法即可快速上手
生态圈原来月丰富、依托微信、流量巨大

不足

小程序目前只有2M大小，使用分包加载可达到20M
ios目前不能直接分享到朋友圈，Android目前支持Beta测试版
不能即时发布，需要微信团队进行是审核，审核周期1-7天
对个人开发者开发的服务项目限制非常大

3.小程序目录结构

pages: 页面总目录
每个页面都是有 .js .json .wxml .wxss 四个文件构成
.js 页面逻辑
.json 页面配置文件
.wxml 页面结构
.wxss 页面样式
utils： 工具目录 常用函数
app.js 微信小程序入口文件，完成小程序的实例注册
app.json 微信小程序的全局配置文件
app.wxss 微信小程序的全局样式文件
project.config.json 记录开发者的偏好设置，如工具界面ui颜色、编译配置、appid、域名校验
sitemap.json 站点地图配置文件，用来配置是否允许微信怕从爬取小程序的页面，可以优化提供小程序曝光率
eslint.js esllint校验配置文件

4.小程序配置

1.配置概述
小程序提供json文件用来对小程序进行配置，决定页面文件的路径、窗口表现、设置网络超市时间、设置多tab等，主要分为全局配置及页面配置

2.全局配置app.json
小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置网络超市时间、设置多tab等，文件内容为一个JSON对象
1.entryPagePath:
小程序默认启动首页
“entryPagePath”: “page/logs/logs”
如果不写，将默认为pages列表的第一项

2.pages
功能：

1.描述项目页面路由信息
2.快速创建页面
3.未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页）

使用语法：

 "pages": [
	"pages/order/order",
	"pages/index/index"
]

3.window:
窗口构成如下

功能：配置项目中的导航条 状态栏 窗口背景颜色 屏幕旋转等

使用语法：

"window": {
	"navigationBarBackgroundCollor": "#f0",
	"navigationBarTitleText": "微信小程序",
	"navagationStyle": "default",
	"backgroundColor": "#DDD",
	"backgroundTextStyle": "dark",
	"enabllePullDownRefresh": true,
	"pageOrientation": "auto"
}

使用注意:

如果自定义导航栏，右侧胶囊会保留去不掉
书信结束后需要手动关闭动画效果（api函数）

4.debug
功能： 方便测试调试，可以打印项目从启动到页面加载完毕所有信息，如Page的注册，数据更新，事件触发
使用语法：

"debug": true

5.tabbar
功能：实现项目中指定或者是在底部的选项卡效果

"tabBar": {
	"color": "#000000",
	"selecteColor": "#f00",
	"backgroundColor": "#ddd",
	"borderStyle": "white",
	"list": [
		{
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "./images/icon/index.png",
			"selectedIconPath": "/images/icon/indexFull.png"
		},{},{}
	]
}

使用注意

1.只有页面底部绑定选项卡才会显示选项卡效果
2.选项卡数据最少2个最多5个，符合人体工程学

4.页面配置

每个小程序页面也可以使用同名.json文件来对本页面的窗口进行配置，页面中配置项会覆盖app.json的window中相同的配置项

使用语法：

{
	"uingComponents": {},
	"navigationBarBackgroundColor": "#fff",
	"navigationBarTitleText": "个人中心",
	"backgroundColor": "#eee",
	"backgroundTextStyle": "light",
	"enablePullDownRefresh": false,
	"disableScroll": true
}

使用注意：

页面配置中只能设置app.json中window对应的配置项，以决定本页面的窗口表现，所以无需写window这个属性
“disablleScroll”：true 只能在页面配置项中设置，设置全局无效

5.场景值

概述：场景值用来描述用户进入小程序的方式，如小程序最近使用列表、扫描二维码、小程序主入口等
获取场景值
App的onLaunch和onShow
通过wx.getLaunchOptionsSync() api函数获取
app.js

let info = wx.getLaunchOptionsSync()
console.log(info)

App({
	// 项目启动执行
	onLaunch(e) {
		console.log(e.scene)
	}
	onShow(e) {
		console.log(e.scene)
	},
	globalData: {
		userInfo:null
	}
})

6.小程序逻辑层

整个小程序框架系统分为两部分：逻辑层（App Service）和视图层（View），VC结构
注册小程序： app()
注册页面： page()
生命周期：执行顺序，应用级别生命周期，页面级别生命周期

1.逻辑层概述

小程序开发框架的逻辑层使用JavaScript引擎为小程序提供开发者JavaScript代码的运行环境以及微信小城的特有功能
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈
开发者写的所有代码最终会打包成一份JavaScript文件，并在小程序启动的时候运行，知道小程序销毁，这一行为类似 ServiceWorker，所以逻辑层也称之为App Service
Tips
小程序框架的逻辑层并非运行在浏览器中，因此JavaScript在web中一些能力都无法使用，如window，document等

2.注册小程序
每个小程序都需要在app.js中调用App方法注册小程序实例
app方法内容：绑定生命周期回调函数、错误监听和页面不存在监听函数、自定义全局函数和自定义全局变量
App（）必须在app.js中调用，必须调用且只能调用一次，不然会出现无法预期的后果

app方法语法：

App({
	//冷启动:如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动
	// 热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动

	//当小程序初始化完成时，会触发onLaunch（全局只触发一次，冷启动）
	onLaunch:function() {
		//应用场景：
		 1.获取用户的场景值
		 2.检测用户登录
		 3.基础库兼容性判断
		 4.记录用户的访问日志
		 5.运发开环境初始化
	 调用不存在的函数
	 //console.log(this) //app实例
	 //this.fun()

	//调用自定义函数
	this.user()
	this.user1()
	this.user2()
	},
	onShow:function() {
	//当小程序启动，或从后台进入前台展示，会触发onShow（冷启动 热启动）
		console.log('触发了onShow')
	},
	onHide:function() {
		console.log('触发了onHide')
	}
	// 当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
	onError:function(msg) {
		console.log('监听到错误了',msg)
	}
	//小程序要打开的页面不存在时触发
	onPageNotFound() {
		console.log('访问的页面不存在')
		// 帮助用户定向到村在的页面，路由跳转
		wx.reLaunch({
			url: 'pages/index/index'
		})
	},
	// 函数声明式
	user:function() {
		console.log('我是声明式函数',this)
	},
	//Es6简写
	user1() {
		console.log('我是简写函数',this)
	}，
	// 箭头函数
	  user2:()=>{
    console.log('我是箭头函数');
  }
	// 自定义全局变量
	globalData: {
		name: '张三',
		array: [1,2,3,4],
		buffer:true
	}
})

获取app实例

let app = getApp()
console.log(app.globalData.name);

注册页面

在每一个独立页面的js文件中，使用Page( Object object )注册页面，接受一个 Object 类型参数
page方法内容：页面的初始数据data、生命周期回调、事件处理函数、自定义事件等。

Page({
	// 页面的初始数据
	data: {
		age: 20,
		hoby: '篮球'
	}
	//生命周期--监听页面加载
	onReady: function() {
		console.log('页面-ontions')
		// 应用场景： 1.获取页面跳转传递的参数 A（name=李四）-B(onload)
		// 2.获取网络数据（发起网络请求 使用接口）
		// 使用自定义函数
		this.user()
		this.user1()
		this.user2()
	},
	// 生命周期函数--监听页面显示
	onShow:function() {
		console.log('页面-onShow')
		// 应用场景：1.发起网络请求
	},
	//  生命周期函数--监听页面初次渲染完成
	onReady: function() {
		console.log('页面-onReady')
		// 应用场景：1.获取页面上的元素位置
	},
	// 生命周期函数--监听页面隐藏
	onHide:function() {
		console.log('页面-onHide')
	},
	onUnload:function() {
		console.log('页面-onUnload')
	}
})

生命周期

微信小程序的生命周期分为两种：一种是app.js文件中的应用级别的生命周期，另一种就是页面.js文件中的页面生命周期
当进入小程序应用的时候先执行app.js文件中的生命周期函数再次执行要访问的页面中的生命周期函数，切后台的时候先执行页面的生命周期函数再执行app.js文件中应用级别的生命周期函数

7.模块化

微信小程序中完全支持模块化规范，ES6和commonjs规范
微信小程序完全支持commonjs和ES6模块规范
1.commonjs
导出：module.exports export 是module.exports 的引用
引入: requrie(‘文件路径’)
2.ES6
导出：export{} export default
引入： import{} ‘文件路径’ import from ‘文件路径’

utils/tip.js 文件

//定义消息提示的方法
const tip = (title,icon) {
	// 弹窗的api函数
	wx.showToast({
		titls,
		icon
	})
}
// 导出方法
module.exports = {
	tip
}
// 在user.js文件中使用
// 引入消息提示模块文件
let {tip} = require('../../utils/tip')
// 使用方法
tip('温馨提示','error')