微信小程序基础（二）

接上序小程序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事件处理函数

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

后续持续更新！！！

微信小程序基础（二）相关推荐

【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...

微信小程序基础（二）

微信小程序基础（二）相关推荐

最新文章

热门文章