一、绪论
1.注册小程序开发账号 登录https://mp.weixin.qq.com
2.获取小程序的AppID
登录小程序管理后台，开发-开发管理-开发设置 可查看APPID
3.安装开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 选择稳定版
4.设置微信开发者工具的外观和代理
设置-外观
设置-代理-不使用任何代理
5.创建第一个小程序
首先创建一个文件夹
点击“加号”按钮-新建项目-选择存放目录-粘贴APPID-不使用云服务-确定
6.在模拟器上查看项目效果-点击编译按钮
7.在真机上查看项目效果-点击预览-扫码查看
8.项目基本组成结构
1.pages存放小程序的页面
2.utils存放工具性质的模块（比如格式化事件的自定义模块）
3.app.js小程序的入口文件
4.app.json小程序项目的全局配置文件
5.app.wxss小程序项目的全局样式文件
6.project.config.json 项目的配置文件
7.sitemap.json 用来配置小程序机器页面是否允许被微信索引
小程序官方建议把所有小程序的页面，都存在pages文件中，以单独的文件夹存在，其中，每个页面有4个基本文件组成，分别是：
(1).js文件 页面的脚本文件，存放页面的数据、事件处理函数等
(2).json文件 当前页面的配置文件，配置窗口的外观、表现等
(3).wxml文件 页面的模板结构文件
(4).wxss文件 当前页面的样式表文件
二、小程序中文件的作用
1.json配置文件的作用
json是一种数据格式，在实际开发中，json总是以配置文件的形式出现，小程序中也不例外，通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。
小程序中有4中json配置文件，分别是：
项目根目录中的app.json 配置文件
是当前小程序的全局配置文件，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。
项目根目录中的project.config.json配置文件
项目根目录中的sitemap.json 配置文件
每个页面文件夹中的.json 配置文件
2.project.config.json配置文件
project.config.json是项目的配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：
.setting中保存了编译相关的配置
3.sitemap.json配置文件
微信已经开放小程序内搜索，效果类似于PC网页的seo。setting.json文件用来配置小程序页面是否允许被微信索引。
当开发者允许微信被索引时，微信会通过爬虫的形式，为小程序页面的内容建立索引，当用户的搜索关键字和页面的索引匹配的时候，小程序的页面将可能展示在搜索结果中。
4.页面的.json文件
小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置。
5.新建小程序页面
在app.json->pages中新增页面的存放路径
6.修改项目首页
只需要调整app.json->pages中页面路径的前后顺序，即可修改项目的首页，小程序会把排在第一页的页面，当做项目的首页进行渲染。
三、wxml
1.什么是wxml
wxml是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于html
2.wxml与html区别
标签名称不同
html(div,span,image,a)
wxml(view,test,image,navigator)
属性节点不同
<a href="#">超链接</a>
<navigator url="#"></navigator>
提供了类似于vue的模板语法
数据绑定
列表渲染
条件渲染
四、wxss
1、什么是wxss
wxss是一套样式语言，用于描述wxml的组件样式，类似于css
2、wxss和css区别
新增了rpx尺寸单位
Css中需要手动进行像素单位换算
rpx在不同大小的屏幕上会自动进行换算
3.提供了全局的样式和局部样式
4.wxss只支持部分css选择器
class id element 并集选择器 后代选择器 ：：after ：：before
五、js逻辑交互
1.小程序中.js文件的分类
小程序中的js文件分为三大类，分别是：
app.js 是整个小程序的入口文件，通过调用APP()函数来启动整个小程序
页面的.js文件 是页面的入口文件，通过调用page()函数来创建并运行页面
普通的.js文件 是普通的功能模块文件，用来封装公共的函数或属性工业面使用
六、小程序的宿主环境
1.什么是宿主环境
宿主环境指的是小程序运行所必需的依赖环境。脱离了宿主环境软件是没有任何意义的。
2.小程序的宿主环境
手机微信是小程序的宿主环境。
3.小程序宿主环境包含的内容
通信环境
运行机制
组件
api
4.通信的主体
小程序中通信的主体是渲染层和逻辑层，其中：
wxml模板和wxss样式工作在渲染层
js脚本工作在逻辑层
5.小程序中的通信模型分为两部分：
渲染层和逻辑层之间的通信 由微信客户端进行转发
逻辑层和第三方服务器之间的通信 由微信客户端进行转发
七、小程序运行机制
1.小程序启动的过程
把小程序的代码包下载到本地
解析app.json小程序项目的全局配置文件
执行app.js小程序的入口文件，调用App()创建小程序实例
渲染小程序首页
小程序启动完成
2.页面渲染过程
加载解析页面的.json配置文件
加载页面的.wxml和.wxss
执行页面的js文件，调用page()创建页面实例
页面渲染完成
八、小程序组件
小程序中的组件也是由宿主环境提供的，开发者可以给予组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了九大类，分别是：
视图容器 基础内容 表单组件 导航组件 媒体组件 map地图组件 canvas化部组件 开放能力 无障碍访问
1.常见的视图类容器组件
view 普通视图区域 类似于div，是一个块级元素 常用于布局
sroll-view 可滚动的视图区域 用来实现滚动的列表效果
swiper和swiper-item 轮播图的容器组件和轮播图的item组件
2.滚动
<scroll-view class="container" scroll-y> //纵向滚动加一个scroll-y
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
3.swiper和swiper-item组件的基本使用
<swiper class="swiper-container">
<!-- 第一张轮播图 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第二张轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三张轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
4.swiper组件的常用属性
indicator boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,.3) 指示点颜色
indicator-active-color color #000000 当前选中指示点的颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动
<swiper class="swiper-container" indicator-dots indicator-color="red" indicator-active-color="blue" autoplay interval="1000" circular>
5.常用的基础内容组件
text 文本组件 类似于html中的span标签，是一个行内元素 通过text组件的selectable属性，实现长按选中文本内容的效果
<view>
手机号支持长安选中效果
<text selectable>123456</text>
</view>
rich-text 富文本组件 支持把html字符串渲染为wxml结构 通过rich-text zujiande nodes属性节点，把html字符串渲染为对应的ui结构
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
6.button
按钮组件 功能比html中的丰富 通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息）
<button type="primary" size="mini" plain>按钮</button> //plain是镂空按钮
7.image
图片组件 默认宽度为300px、高度240px
<image src=""></image>
image组件的mode属性用来指定图片的裁剪和缩放模式，常用的属性值如下：
scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit 缩放模式，保持纵横比缩放，可以完全把图片显示出来
aspectFill 缩放模式，保持纵横比缩放，图片只能在水平或者垂直方向是完整的，另一个方向会发生截取
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
8.navigator
页面导航组件 类似于a链接
九、小程序Api
小程序api是由宿主环境提供的，通过这些丰富的小程序api，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能。
1.小程序api三大分类
事件监听api 以on开头，用来监听某些事件的触发 举例：wx.onwindowResize(function callback)监听窗口尺寸变化的时间
同步api 以sync结尾 执行结果可以通过函数返回值直接获取，出错会抛出异常 举例：wx.setStorageSync(key,value)向本地存储中能够写入内容
异步api 类似于$ajax，需要通过success、fail、complete接收调用的结果 举例：wx.request()发起网络数据请求
十、小程序的发布步骤
上传代码-》提交审核-》发布
在后台查看上传之后的版本 登录小程序后台-》管理-》版本管理-》开发版本，即可查看刚才提交的版本
小程序推广：小程序码 获取小程序码的5个步骤 登录后台-》设置-》基本信息-》小程序码及线下物料下载
扫一扫
1068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
