[if !supportLists]二、[endif]课堂内容
[if !supportLists]1. [endif]微信小程序入门
要想了解微信小程序====>逃不过一个平台：微信公众平台
微信公众平台分类：
服务号：
服务号：为企业和组织提供更强大的业务服务与用户管理能力
中国移动+中国工商银行+114
适用人群：媒体、企业、政府或其他组织。
群发次数：服务号1个月（按自然月）内可发送4条群发消息。
订阅号
订阅号：为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯；
适用人群：个人、媒体、企业、政府或其他组织。
群发次数：订阅号（认证用户、非认证用户）1天内可群发1条消息。
小程序：微信小程序+微信小游戏
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
达到了一种随用随走的境界，微信之父---张小龙
张小龙是靠foxmail发家，foxmail====>qq邮箱结合起来
小程序是啥时候公开上线的呢？
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
小程序应该怎么去学习？
开发文档=====》查看API 学习组件的基本思路
开发者工具===》 结合了Chrome +Vs code 优势，单单使用这个工具就可以完成小程序的搭建。
设计指南====》只要是为企业和个人提供一个行业规范
小程序体验demo
企业微信
[if !supportLists]2. [endif]上手微信小程序
[if !supportLists]2.1 [endif]注册账号
注册分三步：
因为一个邮箱只能注册一个小程序，所以大家在邮箱的时候慎重一下。
完成注册之后就可以登录了，仅需要通过微信扫码来验证身份：
当进入小程序后台之后，会让您填写小程序基本信息
注意：服务类目千万不要选择游戏类
[if !supportLists]2.2 [endif]下载开发者工具
下载成功后，一路next ,傻瓜式安装即可。
第一次打开开发者工具
创建项目
需要AppID，在小程序后台中去查找：
填写完ID之后，进行对应设置：
创建好的小程序，如图所示：
[if !supportLists]3. [endif]小程序后台介绍
[if !supportLists]l [endif]成员管理
管理员+开发人员+体验人员
管理为1开发和体验最多 15个
[if !supportLists]l [endif]版本管理
测试版本+开发版本+审核版本+线上版本
测试版本：正在开发的项目
开发版本：准备上线的项目
审核版本：交由微信团队审核的开发版本
线上版本：审核通过的会到线上版本，供用户使用
[if !supportLists]l [endif]用户反馈
测试人员和客户给我们开发提的建议和有效反馈
[if !supportLists]l [endif]开发+设置 作为熟悉 掌握一下
[if !supportLists]4. [endif]小程序开发者工具
菜单栏：
[if !supportLists]l [endif]选择项目===》打开最近项目
[if !supportLists]l [endif]格式化代码：shift+alt+F
[if !supportLists]l [endif]搜索：ctrl +F
[if !supportLists]l [endif]快捷键：
[if !supportLists]l [endif]文件保存
其他相关的功能如：更新开发者工具+开发者社区 了解一下
工具栏：
至少应该有一个存在
开发常用功能
当我们点击上传之后，会自动上传到小程序后台
开发版本x.y.z
X大版本的更新迭代
Y某一模块的更新迭代
Z某些bug的修复+某些已知内容的更改
版本管理====》主要用于对代码的上传下载，类似于github功能。
详情中选择用户占比最多的，一般来讲没有错。
提前先了解一下合法域名：
默认所有域名都需要提前配置才能使用，
勾选后便可以暂时模拟数据
模拟器：相当于谷歌浏览器的手机页面显示功能
项目树：vscode的项目结构文档
编辑区：vscode的代码编辑区域
调试区：相当于谷歌浏览器的调试功能
[if !supportLists]5. [endif]小程序初始化代码结构
总分结构
总：
App.js主逻辑文件====》App({})
App.json全局配置文件====》页面+窗口 +网络请求时间+debug
App.wxss全局样式 wx:weixin ,ss:css 微信小程序的样式
Project.config.json项目配置文件 只是在新建项目时有效
分：
Pages文件夹
Index子文件夹
Index.js页面逻辑文件 Page({}) //获取应用实例const app = getApp()
Index.json页面配置文件usingComponents使用自定义组件
权重：页面配置>全局配置
Index.wxml页面标签内容 wx:weixin ml:html
主推view+text ====>div+span
之前的html中存在div+h1+p等等都将会被认为普通文本标签，并取消样式的渲染
Index.wxss页面样式 权重： 局部样式>全局样式
Logs子文件夹 ====>同index文件夹保持一致
Log.js调用util的方法来实现获取当前启动时的时间
Utils文件夹
Util.js ====>获取时间年月日时分秒，定义好方法供其他页面使用
[if !supportLists]6. [endif]创建空目录
补充：测试号功能
[if !supportLists]1. [endif]比AppID少了云开发的功能
[if !supportLists]2. [endif]测试号无法上传
第一步：导入空目录，显示缺少project.config.json
解决：创建project.config.json
第二步：缺少app.json入口文件
解决：创建app.json
第三步：app.json不能自动生成
解决：手动创建json对象的格式{}
第四步：pages必须为array
解决：创建pages的方法 “pages”:[“pages/index/index”]
第五步：在对应的json格式中，不能有后缀多余的逗号
解决：删除逗号即可
第六步：读取不到index.wxml的文件
解决：如下图所示创建index.wxml
第七步：找不到index.js
解决：创建index.js在index.wxml的同目录下
第八步：page的方法没有被注册
解决：创建Page({})方法来注册页面
第九步：创建app.js +app.wxss
第十步：设置全局窗口的样式
Navigation导航
Bar栏
BackgroundColor背景颜色
TextStyle文本样式
TitleText标题文本
Enable PullDown Refresh
被允许的，可以的下拉刷新
补充：pages:[...,.... ]
Pages[0]会被当成首页展示出来
调整上下页面位置可以使用alt+↑ || ↓
[if !supportLists]7. [endif]全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
[if !supportLists]l [endif]Pages
Pages[0]会被当成首页展示出来
调整上下页面位置可以使用alt+↑ || ↓
[if !supportLists]l [endif]Window
1.HexColor====>16进制的颜色 “red”× “#fff”√ “#fffffff”√
2.navigationBarTextStyle仅支持black / white
3.custom 自定义导航栏，只保留右上角胶囊按钮
可以在这里搜索QQ音乐小程序，对比导航栏效果。
4.window示意图
5.下拉刷新+上拉加载
6.屏幕旋转
[if !supportLists]l [endif]tabBar
创建成功后，首先会报一个错误，里面必要有list，且必须为array类型
今天上午，在讲详情设置中，说到了tabBar相关限制
从下图可以看出，list中有一个对象，这个对象下四个值：
pagePath页面路径
Text tabBar的文本信息
iconPath图标路径
selectedIconPath被选择的图标路径
如果没有iconPath，selectedIconPath，就长下面这个样子：
此时可以借助iconFont矢量图标库来丰富我们的tabBar
[if !supportLists]l [endif]Debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
当debug设置为true，可以查看全局+页面的显示内容
[if !supportLists]l [endif]App：
onLaunch
onShow
[if !supportLists]l [endif]Register:注册相关页面信息
Index,logs,home,home1,home2
[if !supportLists]l [endif]Route路由切换
Pages/home/home pages[0]会被首先展示出来
[if !supportLists]l [endif]Update view with init data初始化数据并更新页面
[if !supportLists]l [endif]页面执行生命周期钩子
Eg:pages/home/home
onLoad监听页面加载
onShow监听页面显示
onReady监听页面初始渲染成功
执行相关操作：
1.切后台/前台 App onHide || onShow page : onShow
2.更新tabBar执行情况：
从on approute下执行的五步，可以看出tabBar切换时需要执行的步骤。
作业：
创建4个tabBar 页面内容，并且学着去布局排版，将swiper组件的内容展示在首页。
网友评论