一、介绍

1、什么是微信小程序?

        微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
        全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

2、使用微信小程序的好处?

        1. 微信有海量的用户,而且粘性很高,在微信里开发产品更容易触达用户.
        2. 推广 app 或公众号的成本太高.
        3. 开发适配成本低.
        4. 容易小规模试错,然后快速迭代
        5. 跨平台.

3、微信小程序的历史

        2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」需要注意的是，之前是叫做应用号
        2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案。
        2017年1月9日，微信推出的“小程序”正式上线。“小程序”是一种无需安装，即可使用的手机“应用”。不需要像往常一样下载App，用户在微信中“用完即走”。

4、其它小程序

1. 支付宝小程序
2. 百度小程序
3. QQ小程序
4. 今日头条 + 抖音小程序

        我们可以不难的看出小程序有很多种,如果我们以后在开发过程中遇到这些我们没学过的小程序,我们应该怎么办呢? 不要担心,基本现在所有的小程序,它的使用以及文档跟微信小程序的使用是什么类似的. 所以,你只要确保成功掌握微信小程序的常规开发,那么你在学习其它小程序的时候是不需要花费太多时间的.

5、官方微信小程序体验

        打开微信扫一扫功能,对准下面这张二维码,就可以体验小程序的组件、扩展能力、接口、云开发功能了.

二、环境准备

        开发微信小程序之前,必须要准备好响应的环境.

1、注册账号

        小程序注册链接 : https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
        建议 : 使用新邮箱,没有注册过其它小程序或者公众号的. 我在这里使用了 163.com 邮箱.
        接着我们进行填写信息,以及邮箱验证登录,手机扫描二维码确认本人信息等操作就注册完成了.

2、获取 APPID

        由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的 APPID ,所以在注册成功后,可登录,然后获取APPID. 也可以使用测试号,后期上线后,可以更改为 AppId

        注意 : AppId 号要注意隐秘,不要给别人看到.

3、开发工具

        我们想要开发微信小程序,就需要在微信开发工具环境里面进行配置编写.
        微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。 但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码
        vs code 负责敲代码， 微信编辑工具 负责预览

        下面我会放入两张图,你一看你明白怎么下载了.

三、创建微信小程序

1、打开微信开发者工具

        我们打开微信开发者工具,会弹出一个二维码.第一次使用时,我们需要用自己的微信来进行登录,以后再次打开就不用扫描二维码了.

2、创建小程序项目

        2.1 我们扫描登录完成后,会显示图1的页面,点击加号就可以进行下一步配置信息了

        2.2 接着我们配置小程序信息,项目名称,位置等, 在图2中需要注意的是 : 我们现在是在测试, AppId 中可以选择 测试号,但是不能使用后端的云服务.你也别’着急,后期项目写完之后,是可以修改 AppId 的.改为正式. 然后点击 “新建” 就创建完成了.

图1

图2

四、小程序框架目录

        MINA 指的是原生框架
        ⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有⽣ APP 体验的服务。
        ⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1、小程序文件解构和传统web对比

2、小程序项目文件作用

五、小程序配置文件

        一个小程序的应用程序会包括最基本的两种配置文件, 一种是全局配置 app.json 和 页面配置 page.json. 配置 sitemap.json 了解一下就可以了. 还需注意的是 : 配置文件中不能注释,不然后报错.

1、全局配置 app.json

        小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

        pages 和 window 字段的含义 :

        1. pages 字段⸺用于描述当前小程序所有页面的路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.

        2. window 字段⸺定义小程序所有页面的顶部背景颜色,文字颜色定义等.

        1.1 配置 pages

        我们打开微信开发者工具,找到 app.json 文件,然后打开.会看到14行代码,我们先在 pages 里面进行配置.

        1.1.1 我们想要配置一个新的文件,不用我们手动创建,直接在 pages 里面写入路径,点击 ctrl + s 保存就可以了. 微信开发者工具会自动帮我们在指定路径中创建.

图1

图2

        1.1.2 我们可以将指定的某个文件显示内容显示在首页中. 做法很简单,把指定的文件放入在 pages 配置中的第一个,保存就可以了. 注意: 最后一个配置文件路径不要加逗号 “,”

图1

图2

        1.1.3 我们使用 vscode 打开这个当时创建微信小程序项目时目录,然后在 vscode 里面,对 app.json 进行上述的配置,却不能创建文件.
        注意: 这是因为当我们只有在 微信开发者工具中配置,它才会帮我们创建相应的页面文件. 当文件名字旁边会显示一个圆圈,这是我们正在编译文件.我们 ctrl + s 保存后,就会消失了

        1.2 配置 window

        官网文档地址 : 全局配置

         1.2.1 我们会看到 window 配置下的4个配置,我们先说后面这三个,最后再说第一个会比较容易理解

        1.2.2 我们再来说第一个配置 backgroundTextStyle, 下拉 loading 的样式. 这个效果需要添加一个允许下拉刷新,可以在上面的官网文档链接中查看配置,如果不设置允许下拉刷新,屏幕不会被拉动,会很不好理解这第一个配置属性. 下面看两张图;

图1

图2

        1.2.3 个人建议:

                1. 配置环境属性时,使用微信开发者工具,当你打入字母开头,编译器会有提示,不会出错
                2. 写页面自己的标签,样式,逻辑等使用 vscode

2、配置tabBar

        2.1 在 pages 和 window 同级下配置 tabBar,输入 tab,就会出现 tabBar.点击回车,自动补全其内的配置信息.记得在 tabBar 后面加上 逗号","

"tabBar": {
"list": [{
  "pagePath": "pagePath",    // 配置跳转的路径
  "text": "text",          // 标题
  "iconPath": "iconPath",    // 未选中的图标
  "selectedIconPath": "selectedIconPath"    // 已经选中的图标
}]
},

        2.2 自定义一个文件夹,和 pages、utils是同级的,里面放入一种组件图标的两种样式,点击之前和点击之后.可以去 阿里矢量图官网去看.

        2.3 在 pages 下配置一些页面

"pages":[
	"pages/index/index",   // 首页
	"pages/img/img",  // 图片
	"pages/mine/mine",  // 我的
	"pages/search/search",   // 搜索
	"pages/logs/logs",
	"pages/work1/work1"
],

        2.4 在 tabBar 下配置信息

"tabBar": {
"list": [
  {
  "pagePath": "pages/index/index",
  "text": "首页",
  "iconPath": "icon/_home.png",
  "selectedIconPath": "icon/home.png"
},
{
  "pagePath": "pages/img/img",
  "text": "图片",
  "iconPath": "icon/_img.png",
  "selectedIconPath": "icon/img.png"
},{
  "pagePath": "pages/mine/mine",
  "text": "我的",
  "iconPath": "icon/_my.png",
  "selectedIconPath": "icon/my.png"
},{
  "pagePath": "pages/search/search",
  "text": "搜索",
  "iconPath": "icon/_search.png",
  "selectedIconPath": "icon/search.png"
}
]
},

        2.5 点击保存,查看小程序,我们成功了

        2.6 在 list 下也有同级的一些属性,可以在官网文档中查看,这里就不在一一列举了.
        官网文档地址 : 页面配置

3、页面配置 page.json

        这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置. 开发者可以独立定义每个页面的⼀些属性，如顶部颜色、是否允许下拉刷新等等。页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json的 window 中相同的配置项。

         3.1 说简单点,它能做什么事情?

                 1. 能够控制页面上导航栏的外观
                 2. 后期当我们使用自定义组件的时候,也可以在里面进行一些配置;
                 3. 也可以单独的控制某个页面是否可以上拉下拉刷新

         3.2 点击 app.json ,找到 window 其中复制你想要的内容

"window":{
	"backgroundTextStyle":"dark",
	"navigationBarBackgroundColor": "#000000",
	"navigationBarTitleText": "个人空间",
	"navigationBarTextStyle":"white",
	"enablePullDownRefresh":true
},

         3.3 在 app.json 配置文件 pages 中,将你要设置的页面路径放到第一位

         3.4 点击 你要设置的页面,找到里面的 “文件名.json” 文件,然后赋值

         3.5 点击保存,查看小程序

4、配置sitemap.json(了解即可)

         小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。

         这个只需了解即可,如果你敢兴趣,可以去官网文档查看

         官网文档地址 :sitemap 配置

六、总结

         今天的微信小程序就学到这里啦,这篇文章没有设计太深面的东西.第一次学习嘛,慢慢来.没接触微信小程序之前一直觉得挺难得,今天通过解除其实并没有想象中的那么难.期待明天学习的新知识,明天见!