1.小程序简介
1.1小程序与网页开发的区别
运行环境不同：网页在浏览器环境、小程序在微信支付宝等环境
API不同：不发使用DOM和BOM的API，可使用微信环境提供API如支付、扫码、定位
开发模式不同（主要区别）：网页开发是浏览器+代码编辑器；小程序是申请账号+安装小程序开发者工具+创建配置项目
1.2 体验小程序
使用最多的是组件和接口
1.3 注册小程序开发账号
https://mp.weixin.qq.com/ 进入网址，点击注册，选择小程序，填写信息
获取appID：登录网址=>开发=>开发设置=>AppID
注意：选择个人主体，不支持微信认证，微信支付，高级接口能力
1.4 安装微信开发者工具
1.4.1微信开发者工具的功能：
快速创建小程序项目
代码的查看和编辑
小程序功能测试
小程序的预览和发布
1.4.2下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
打开网址--稳定版--下载-安装
安装成功--扫码登录--创建项目
1.4.3 设置外观和代理
外观--主题--字号18--行距12
代理设置--不使用任何代理，勾选直接连网络（系统代理会影响代理软件）
1.5创建第一个小程序项目
新建--后端服务：不使用云服务--JavaScript
编译：编译器运行（常用）
预览：微信扫码预览
帮助--开发者文档：常用查看API
2.代码构成
2.1 项目目录介绍
pages: 存放小程序页面
utils：存放工具性质的模块（例如格式化时间的自定义模块）
app.js: 入口文件
app.json: 全局配置文件
app.wxss: 全局样式文件
project.config.json: 配置文件
sitemap.json: 配置小程序以页面是否被微信索引
2.2 页面的组成部分
小程序的页面都放在pages文件夹中，以单独的文件夹存在
其中每个页面又四个基本页面组成
js文件：脚本文件，存放页面数据，事件处理
json文件：页面的配置文件，配置窗口外观，表现
wxml文件：模板文件
wxss文件：样式文件
2.2.1 json配置文件
json是一种数据格式，以配置文件形式出现，可对小程序项目进行不同级别的配置
小程序中有四种json配置文件：
app.json 全局配置文件：pages全局记录页面；window全局定义页面背景色，文字颜色等；style全局定义组件样式；sitemapLocation:指定sitemap.json的位置
project.config.json项目配置文件： 记录个性化配置；setting编译配置；projectname项目名称；appid 保持小程序的账号ID
sitemap.json配置文件：类似PC的SEO引擎搜索是否运行，action：disallow/allow；在config.json里checkSiteMap: false关闭索引提示
每个页面的json文件：本页面外观配置，会覆盖app.json中相同的配置项
ctrl+k+c注释快捷键
2.2.2 wxml 文件
微信小程序的标签语言，类似HTML
2.2.2.1WXML和HTML的区别
标签名称不同：div-view, span-text, img-image, a-navigator
属性节点不同:<a href="#">百度</a>，<navigator url="/pages/index/index"></navigator>
wxxl有vue中的模板语法:数据绑定，列表渲染，条件渲染
2.2.3 wxss文件
2.2.3.1 wxss 与css区别
新增rpx尺寸单位：css需用rem进行像素单位换算，wxss用rpx在不同屏幕会自动换算
提供全局样式和局部样式：app.wxss是全局的样式，每个页面的wxss样式对当前样式有效
wxss仅支部分持css选择器：class、id、element、并集、后代、::after/before伪元素选择器等
2.2.4 js文件
小程序中js文件分三大类
app.js文件：入口文件
页面上的js：页面入口文件调用Page()函数创建并运行页面
普通的js文件：普通的功能模块文件，用来封装公共的函数或属性使用；如utils-util.js文件
2.3 新建小程序页面
app.json--pages新增页面存放路径，小程序开发者工具会自动创建页面文件
2.4 修改项目首页
app.json -- pages 数组中页面路径的前后顺序，第一个就是首页
3.宿主环境
3.1 宿主环境介绍
宿主环境是指程序运行所必须的依赖环境
例如Android系统和IOS系统是两个不同的宿主环境，安卓的微信是不能在IOS环境下运行的，安卓的宿主环境是Android，脱离了宿主环境的软件是没有意义的
手机微信是小程序的宿主环境
3.2小程序的宿主环境
小程序宿主环境包含以下四个：通信模型、运行机制、组件、API
3.2.1通信模型
1、小程序的通信的主体是渲染层和逻辑层
渲染层：wxml模板、wxss样式
逻辑层：js脚本文件
2、小程序的通信分两部分
渲染层和逻辑层之间通信：微信客户端转发
逻辑层和第三方服务器之前的通信：微信客服端转发
3.2.2 运行机制
小程序启动过程
代码下载到本地
解析app.json全局配置文件，调用App()创建小程序实例
app.js入口文件
渲染小程序首页
小程序启动完成
小程序页面渲染过程
加载解析页面json文件
加载渲染层：wxml模板和wxss样式
执行页面js文件：调用Page()创建页面实例
页面渲染完成
3.2.3组件
小程序组件是由宿主环境提供的，组件可快速搭建页面，组件分为了以下九大类
3.2.3.1视图容器
① view
普通的视图区域
类似div，是一个块级元素
<!--pages/test/test.wxml-->
<!-- 横向布局flex-direction: row -->
<view class="row">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
<text>我是一条分割线~</text>
<!-- 纵向布局 flex-direction: column -->
<view class="row" style="flex-direction: column;">
<view>1</view>
<view>2</view>
<view>3</view>
</view>
/* pages/test/test.wxss */
/* 横向布局 */
.row {
display: flex;
flex-direction: row;
/* 纵向布局 */
/* flex-direction: column; */
}
.row view {
width: 200rpx;
height: 200rpx;
line-height: 200rpx;
text-align: center;
}
.row view:nth-child(1) {
background-color: pink;
}
.row view:nth-child(2) {
background-color: greenyellow;
}
.row view:nth-child(3) {
background-color: rgb(115, 214, 218);
}
②scroll-view
可滚动的视图区域
实现滚动列表的效果
加scorll-y纵向滚动，scorll-x横向滚动
<scroll-view class="row" scroll-y="true" style="height: 100rpx;">
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>
<text>我是一条分割线~</text>
<scroll-view class="row" scroll-x="true" style="width: 100rpx;white-space: nowrap;">
<view>1</view>
<view>2</view>
<view>3</view>
</scroll-view>③swiper和swiper-item
轮播图容器组件和轮播图item组件
<swiper indicator-dots indicator-color="pink" autoplay interval="1000">
<swiper-item>a</swiper-item>
<swiper-item>b</swiper-item>
<swiper-item>c</swiper-item>
</swiper>④基础容器组件text和rich-text
text组件
类似span标签，是行内元素
只有text在支持长按选择功能，view不支持
rich-text组件
富文本组件，通过node属性把html结构转为ui结构
<text selectable>长按选中</text>
<rich-text nodes="<h1 style='color:red'>标题"></rich-text>⑤其他常用组件
button
功能比原生的丰富：open-type属性可以使用微信的功能（客服、转发、授权、获取用户信息）
image
默认高度width为300px，height为240px
mode 属性指定图片的裁剪和缩放
<!-- 图片不改变比例，容器大小有留白 -->
<image src="/images/15.jpg" mode="aspectFit"/>
<!-- 图片不改变元比例，会缩放图片，填充容器 -->
<image src="/images/15.jpg" mode="aspectFill"/>
<!-- 缩放模式，高度/宽度不变，宽度/高度自适应 -->
<image src="/images/15.jpg" mode="widthFix"/>
<image src="/images/15.jpg" mode="heightFix"/>navigator
页面导航组件，类似a标签
3.2.4 API
小程序的API 是微信宿主环境提供的，可调用微信功能，如获取用户信息、本地存储、支付等
小程序的API分为事件监听API、同步API、异步API
3.2.4.1 事件监听API
特点：on开头，监听事件触发
如wx.onWindowResize
3.2.4.2 同步API、
特点1：以sync结尾的API
特点2：可以通过函数返回值直接获取，如果执行出错就会抛出异常
如：wx.setStorageSync(string key, any data),向本地存储写入内容
3.2.4.3 异步API
特点：类似jquery的$ajax函数，通过success、fail、complete接收调用结果
如wx.request()发送网络请求，通过success回调函数接收数据
注意：编写样式类型时，不要和全局样式类名相同！！会导致样式不生效
-
协同工作和发布
4.1 协同工作
4.1.1 管理权限和成员管理
权限管理的需求
同一个项目的开发，会有不同岗位，不同人员参与开发
项目成员的组织结构：
小程序的开发流程
成员管理
小程序的管理体现：管理员对项目成员和体验成员的管理
4.1.2 开发权限和维护项目成员
维护项目成员：https://mp.weixin.qq.com/wxamp/user/manage
4.2 发布
4.2.1 软件开发版本
开发版：开发者在开发过程中进行自测的版本
体验版：开发版稳定时，产品经理和测试人员进行体验
正式版：bug修复完后，提供用户使用
4.2.2 小程序开发版本
开发版：使用开发者工具开发提交审核代码，开发版代码删除对审核版和上线版没有影响
体验版：选择一个开发版本作为体验版
审核版：只有一份代码处于审核版，审核通过变成线上版
线上版：供全部用户使用的版本，新代码发布后会覆盖原有的版本
4.2.3 发布上线
小程序发布上线步骤：
上传代码--提交审核--发布
①代码上传：上传（右上角）--填写版本号和备注
后台查看版本：登录小程序管理后台--版本管理--开发版本
②提交审核：为了保证质量，符合相关的规则，需要通过腾讯官方审核
登录小程序管理后台--开发版本-提交审核
③发布：当审核通过，审核版本--发布即可
4.2.4 小程序推广
4.2.4.1 小程序码的推广
小程序码推广的优势
比普通二维码具有辨识度，冲击力
清晰的树立小程度的形象
帮助开发者更好的推广小程序
获取小程序二维码步骤：
登录小程序管理后台--设置--基本设置--基本信息--小程序码及物流的下载
5.2.5 运营数据
查看运营数据的两种方式
小程序后台查看：小程序管理后台--统计--手机查看数据（右上角）
小程序运营助手查看：微信--搜索小程序数据助手文章来源：https://www.toymoban.com/news/detail-613459.html
注：笔记来源于黑马程序员文章来源地址https://www.toymoban.com/news/detail-613459.html
到了这里，关于微信小程序入门篇的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
