MOOC微信小程序开发从入门到实践~笔记

MOOC微信小程序开发从入门到实践~笔记

1、图标网站【icon】www.iconfont.cn

2、新建项目是必须需要AppID

3、app.js是页面逻辑文件
app.json是页面全局配置文件（pages windows）
app.wss全局页面的样式
project config.json项目的配置文件

4、获取用户信息：wx.getUserInfo（）

5、【tabBar】：如果小程序是一个多tab应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab切换时现实的对应页面

属性	类型	必填	默认值	描述
color	HexColor		是	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor		是	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor		是	ab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

//在项目的app.json文件中输入：
  {
   "page":[
	],
	"windows":{
   
	},
"tabBar":{
   
  "list":[
	"pagePath":"pages/index/index",
	"text":"首页"
	"iconPath":"image/first1.png"
	"selectedIconPath":"images/first2.png"
	},
	{
   
	"pagePath":"pages/logs/logs",
	"text":"日志"
	}
	],
}

·创建image文件夹，将图标下载进去

6、授权登录页面：
（1）使用wx.login()获取code
（2）通过wx.request()发送code，并访问后台（开发者服务器）
（3）微信后台使用登录凭证校验接口（appid+appsecret+code）实现导入接口服务
（4）接口返回session_key(小程序唯一标识) + openid等
（5）后台产生自定义登录状态，与openid，session_key关联
（6）后台返回小程序前端（自由登录状态）
（7）将返回的信息存进storage中，方便以后获取

7、同步缓存：处理完本方法才会继续执行
异步缓存： 不会阻塞当前的任务

【注：数据缓存上限为10MB】

8、一般将登录和注册相关的代码放在app.js中

9、点击“详情”，选择不校验合法域名

10、wx.showModal()模态对话框

11、相对路径：…/指的是当前文件所在上一级目录
./指的是当前目录
…/…/指的是当前文件所在的上上级目录
绝对路径：“/pages/test/test”

12、微信官方UI库WeUI：是一台同微信原生视觉体验一直的基础样式库。
包含button、cell、dialog、progress、toast、article、actionsheet、icon等格式元素
下载地址：https://github.com/Tencent/weui-wxss
开发者可以将样式库下载并使用微信web开发者工具打开dist目录并导入，可以预览样式库（提前复制style文件夹，并在app.wxss文件中加入@import‘style/weui.wxss’）

13、将表单中输入的值传入后台：
在中加入bindchange事件

14、在.js文件中的data语句中加入变量并设置初始值name:’’
在.js文件中加入changeName:function(e){this.setData{name:e.detail.value}}函数

15、bindtap事件的绑定：
可以绑定在.wxml组件上，并触发事件（需要在.js逻辑层中定义相应的处理函数）

16、小程序API的路由（5种）：

• wx.switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面
• wx.reLaunch：关闭所有页面，并打开某个页面
• wx.redirectTo：关闭当前页面，并跳转到相应的某个页面。但不允许跳转到tabBar页面
• wx.navigateTo：保留当前页面，并跳转到相应的某个页面。但不允许跳转到tabBar页面【页面会自动添加返回的标识】

【注：小程序中的页面栈最多只有10层】

• wx.navigateBack：关闭当前页面，返回上一层或多级页面。可以通过getCurrentPages获取当前的页面栈，来决定返回多少层。

17、声明变量和变量的赋值：
（1）在.js文件的data数组中定义变量，并赋值
A：‘a’，
（2）可以在.js文件中通过var语句定义变量，并赋值

var newList = this.data.list.sort(this.randSort);

（3）在wxml文件中使用{ { }}形式将文字变成变量，并在js文件中对其赋值

	<button bintap='beginAnswer'>{
  {msg}}</button>
	this.setData({
		msg:'测试结束'
		)}//更阿贵数据的同时会重新展示更新的页面
	或者
	this.data.msg='测试结束'//只改变msg的值，不会更新页面

18、 this.setData 中不能使用 console.log( )语句， 如果需要查看赋值后变量的值，需要在 this.setData({ })语句外使用 console.