微信小程序第一天学习

[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组件的内容展示在首页。