学习目标:
![](https://img.haomeiwen.com/i8934731/af300564af8ff06c.png)
小程序的简介
1.小程序和普通网页开发的区别
![](https://img.haomeiwen.com/i8934731/3b5fd3b7fb015cd6.png)
创建第一个小程序
1.点击注册 使用浏览器 打开https://mp.weixin.qq.com/网站,点击右上角的 立即注册 即可进入小程序开发账号的注册流程
![](https://img.haomeiwen.com/i8934731/d9802e3810cada01.png)
2.下载开发者工具
微信开发者工具是微信官方推荐使用的小程序开发工具,它提供的主要功能如下:
a.快速创建小程序项目
b.代码查看和编辑
c.对小程序功能进行调试
d.小程序的预览和发布
3.扫码登录开发者工具
![](https://img.haomeiwen.com/i8934731/9abd1eceb80e3a6f.png)
4.设置开发者工具的外观和代理
![](https://img.haomeiwen.com/i8934731/d9699c929a81f583.png)
5.点击新建项目
![](https://img.haomeiwen.com/i8934731/c8a4d0b8131b9412.png)
小程序的项目结构
小程序的基本组成结构
![](https://img.haomeiwen.com/i8934731/abcd94a64f58c1b4.png)
小程序页面的组成部分
小程序官方建议把所有小程序的页面,都放在pages目录中,以单独的文件存在,如图:
![](https://img.haomeiwen.com/i8934731/d924d99348c6ce23.png)
Json配置文件的作用
JSON是一种数据格式,再实际开发中,JSON总是以配置文件的形式出现。小程序也不例外:通过不同的 .json配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有4中json配置文件,分别是:
1).项目根目录中的 app.json 配置文件
2).项目根目录中的 project.config.json 配置文件
3).项目根目录中的 sitemap.json 配置文件
4).每个页面文件夹中的 .json 配置文件
app.json文件
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、底部tab、等。
Demo项目里边的app.json 配置内容如下:
![](https://img.haomeiwen.com/i8934731/c2f314458869fd42.png)
project.config.json文件
project.config.json 是项目配置文件,用来记录我们对小程序开发工具所作出的个性化配置,例如:
setting中保存了编译相关的配置
projectname 中保存的是项目名称
appid中保存的是小程序的账号ID
![](https://img.haomeiwen.com/i8934731/9cee01ad4f4ee2fd.png)
sitemap.json文件
微信已开放小程序内搜索,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建议索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
![](https://img.haomeiwen.com/i8934731/5c462f9ccc8f8f1b.png)
![](https://img.haomeiwen.com/i8934731/561b9e7e88166cfd.png)
页面的.json配置文件
小程序中的每一个页面,可以用.json文件来对页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项。例如:
![](https://img.haomeiwen.com/i8934731/75c99c9a904080c2.png)
新建小程序页面
只需要在 app.josn > pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件 如图所示:
![](https://img.haomeiwen.com/i8934731/8ae20ed2f5ad9d27.png)
修改项目首页
只需要调整 app.json > pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把牌在第一位的页面,当做项目首页进行渲染,如图:
![](https://img.haomeiwen.com/i8934731/75cb6560e38e1d52.png)
什么是WXML?
WXML(WeiXin Markup Language)是小程序框架设计的一套 标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
WXML和HTML之间的区别?
![](https://img.haomeiwen.com/i8934731/ec69cff99efcfff8.png)
什么是WXSS?
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。
WXSS和CSS的区别?
![](https://img.haomeiwen.com/i8934731/c637a25ab659a89f.png)
小程序中的.js文件
一个项目仅仅提供页面的展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。例如:响应用户的点击,获取用户的位置等等。
小程序中.js文件的分类
![](https://img.haomeiwen.com/i8934731/9fb8c5dbb808a924.png)
小程序的宿主环境
什么是宿主环境?
![](https://img.haomeiwen.com/i8934731/6f5461db15a731d3.png)
小程序的宿主环境
![](https://img.haomeiwen.com/i8934731/8e4186f2d431083c.png)
小程序宿主环境包含的内容
1.通信模型
2.运行机制
3.组件
4.API
小程序的宿主环境-通信模型
1.通信的主体
![](https://img.haomeiwen.com/i8934731/283d40a711eb8581.png)
2.小程序的通信模型
![](https://img.haomeiwen.com/i8934731/7702106a1e315920.png)
3.小程序的运行机制
小程序的启动过程:
![](https://img.haomeiwen.com/i8934731/b202630cb82d64a0.png)
小程序的页面渲染的过程:
![](https://img.haomeiwen.com/i8934731/8e893914ea0cfc9b.png)
4.小程序的组件
小程序中的组件也是有宿主环境提供的,开发者可以给予组件快速搭建出漂亮的页面结构。官方把小程序的组件分了九大类,分别是:
视图容器 ,基础内容,表单组件,导航组件, 媒体组件,map地图组件,canvas画布组件,开放能力,无障碍访问
其中前四个是比较常见的组件
视图容器组件有:
![](https://img.haomeiwen.com/i8934731/4ba32fa4d983e4ec.png)
view 组件的基本使用示例:
![](https://img.haomeiwen.com/i8934731/7ceb248b822c0e24.png)
scroll-view组件的基本使用:
![](https://img.haomeiwen.com/i8934731/97e90ffe6e4d1693.png)
swiper和swiper-item组件的基本使用:
![](https://img.haomeiwen.com/i8934731/343cbe1c9d439a0e.png)
轮播图组件swiper 常用的一些属性:
![](https://img.haomeiwen.com/i8934731/a87474db8f312d16.png)
![](https://img.haomeiwen.com/i8934731/032e549db3fc6d3e.png)
常见的基础内容组件:
![](https://img.haomeiwen.com/i8934731/16858cb937cf217c.png)
text组件的基本使用:
![](https://img.haomeiwen.com/i8934731/750409d3568656d7.png)
rich-text组件的基本使用:
![](https://img.haomeiwen.com/i8934731/d1301af17a47f3d9.png)
其他常用组件:
![](https://img.haomeiwen.com/i8934731/fa94ec4d5e06d1b6.png)
button按钮的基本使用:
![](https://img.haomeiwen.com/i8934731/c1924201c48978cd.png)
值得注意的是,这些组件的默认样式是宿主环境提供的,之前的app.json篇讲述了,在app.json中可配置全局样式,其中一个配置项 "style":"v2"配置项,是当前全部组件样式的版本,版本的不同,会影响到全局组件的样式。
image组件的基本使用:
![](https://img.haomeiwen.com/i8934731/08a60d4d39e90dd6.png)
image组建中的mode属性:
![](https://img.haomeiwen.com/i8934731/486395e54fbb974b.png)
5.小程序API的概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便调用微信提供的能力,例如:获取用户信息,本地存储,支付功能等。
小程序API三大分类:
![](https://img.haomeiwen.com/i8934731/addf9494a0fa1ff9.png)
协议同工作和发布
小程序的权限管理
1.小程序成员管理(可扫码登录微信公众号后台来查看这些权限配置):
![](https://img.haomeiwen.com/i8934731/855ef46ef27fe93c.png)
2.不同项目成员对应的权限:
![](https://img.haomeiwen.com/i8934731/413ccb156a6b5b9c.png)
3.开发者的权限说明:
![](https://img.haomeiwen.com/i8934731/242cbe028267f032.png)
4.添加项目成员和体验成员:
![](https://img.haomeiwen.com/i8934731/23e4fddc681ba208.png)
小程序的版本
1.软件开发过程中的不同版本
![](https://img.haomeiwen.com/i8934731/c3fb825f3aee2361.png)
2.小程序的版本
![](https://img.haomeiwen.com/i8934731/4e63b4ffafa21960.png)
3.小程序的发布上线
一个小程序的发布上线,一般经过 上传代码-提交审核-发布 这三个步骤。
4.小程序上传代码
![](https://img.haomeiwen.com/i8934731/d40e7a04ecef5c15.png)
5.在后台查看上传之后的小程序版本
![](https://img.haomeiwen.com/i8934731/3b598302df7b872b.png)
6.小程序提交审核
![](https://img.haomeiwen.com/i8934731/cdffd1ce34db6fe8.png)
7.小程序的发布
![](https://img.haomeiwen.com/i8934731/1f2c72d8207b97be.png)
总结
![](https://img.haomeiwen.com/i8934731/967e02197d7b4757.png)
网友评论