微信小程序基础（二）

接上序小程序API概述
小程序中的API是由宿主环境提供的，通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,
例如:获取用户信息、本地存储、支付功能等。

小程序API的三大分类
小程序官方把API分为了如下3大类:
①事件监听API
●特点:以on开头,用来监听某些事件的触发
●举例: wx.onWindowResize(function callback)监听窗口尺寸变化的事件
②同步API
●特点1:以Sync结尾的API都是同步API
●特点2: 同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
●举例: wx.setStorageSync('key', 'value')向本地存储中写入内容.
③异步API
●特点: 类似于 jQuery中的$.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
●举例: wx.request()发起网络数据请求，通过success回调函数接收数据
 

一、协同工作和发布-协同工作

1.了解权限管理需求
在中大型的公司里，人员的分工非常仔细:同-一个小程序项目，-般会有不同岗位、不同角色的员工同时参与
设计与开发。
此时出于管理需要，我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分，使他们能够高效的进
行协同工作。

了解项目成员的组织结构

 

 小程序的开发流程

        

成员管理的两个方面
 

小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
①项目成员:
●表示参与小程序开发、 运营的成员
●可登录小程序管理后台
●管理员可以添加、 删除项目成员，并设置项目成员的角色

②体验成员:
●表示参与小程序内测体验的成员
●可使用体验版小程序，但不属于项目成员
●管理员及项目成员均可添加、删除体验成员

不同项目成员对应的权限

 

开发者的权限说明
 ①开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发
②体验者权限:可使用体验版小程序
③登录权限:可登录小程序管理后台，无需管理员确认
④开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
⑤腾讯云管理:云开发相关设置

二、协同工作和发布-小程序的版本

软件开发过程中的不同版本

在软件开发过程中，根据时间节点的不同,会产出不同的软件版本，例如:
①开发者编写代码的同时，对项目代码进行自测(开发版本)
②直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
③最后修复完程序的Bug后，发布正式版供外部用户使用

小程序的版本

 

发布线上

 

在后台查看上传之后的版本
登录小程序管理后台->管理->版本管理->开发版本，即可查看刚才提交上传的版本了

提交审核
●为什么需要提交审核:为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方
审核的。
●提交审核的方式: 在开发版本的列表中，点击“提交审核”按钮之后，按照页面提示填写相关的信息，就
能把小程序提交到腾讯官方进行审核。

发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时在审核版本的列表中，点击“发布”按钮
之后，即可把“审核通过”的版本发布为“线上版本”，供所有小程序用户访问和使用。

基于小程序码进行推广
相对于普通二维码来说，小程序码的优势如下:
①在样式.上更具辨识度和视觉冲击力
②能够更加清晰地树立小程序的品牌形象
③可以帮助开发者更好地推广小程序

 

获取小程序码的5个步骤:
登录小程序管理后台->设置->基本设置->基本信息->小程序码及线下物料下载
 

三、协同工作和发布-运营数据

①在“小程序后台”查看
1.登录小程序管理后台
2.
点击侧边栏的“统计
3.点击相应的tab可以看到相关的数据
②使用“小程序数据助手”查看.
1.
打开微信
2.
搜索.“小程序数据助手"
3.查看已发布的小程序相关的数据

查看小程序运营数据的两种方式：全局配置方式 | 全局配置- window

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:
①pages
●记录当前小程序所有页面的存放路径
②window
●全局设置小程序窗口的外观
③tabBar
●设置小程序底部的 tabBar 效果
④style
●是否启用新版的组件样式

小程序窗口的组成部分

 

 WXML模板语法-数据绑定
  数据绑定的基本原则
①在data中定义数据
②在WXML中使用数据

在data中定义页面的数据

在页面对应的.js 文件中，把数据定义到data对象中即可:

Mustache语法的格式
 把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可。语法格式为:

 

        

Mustache语法的应用场景
Mustache语法的主要应用场景如下:
●绑定内容
●绑定属性
●运算(三元运算、算术运算等)
 

动态绑定内容
页面数据如下

页面结构如下

 

跟之前的差不多

动态绑定属性
 页面数据如下

页面结构如下

 

 

 

三元运算 

 
在控制台查看
算数运算
页面数据如下

 

 

 

四、WXML模板语法 - 事件绑定 

什么是事件？

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序中常用的事件
 

事件对象的属性列表
 当事件回调触发的时候，会收到一一个事件对象event,它的详细属性如下表所示:

target和currentTarget的区别
 target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例

点击内部的按钮时，点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。
此时，对于外层的view来说:
e.target指向的是触发事件的源头组件，因此，
e.target是内部的按钮组件
e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的view组件

bindtap的语法格式
 在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
①通过bindtap,可以为组件绑定tap触摸事件，语法如下:

②在页面的js文件中定义对应的事件处理函数,事件参数通过形参event (一般简写成e)来接收:
 

在事件处理函数中为data中的数据赋值
 通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值,示例如下:

 

事件传参
在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值,示例代码如下:
 

bindinput的语法格式
 在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:
①通过bindinput,可以为文本框绑定输入事件:

②在页面的.js文件中定义事件处理函数:
 

 

实现文本框和data之间的数据同步
实现步骤:
①定义数据
②渲染结构
③美化样式
绑定input事件处理函数

感谢观看！看到这了点下赞吧！谢谢!         欢迎指证！

后续持续更新！！！