文章目录

1、小程序简介
- 1.1、什么是小程序
- 1.2、发展背景
- 1.3、小程序与普通网页开发的区别
- 1.4、主要优势
2、第一个小程序
- 2.1、注册小程序开发账号
- 2.2、了解微信开发者工具
3、小程序代码的基本构成
- 3.1、项目结构
- - （1）了解项目的基本组成结构
  - （2）小程序页面的组成部分
- 3.2、JSON 配置文件
- - （1）JSON配置文件的作用
  - （2）新建小程序页面
  - （3）修改项目首页
- 3.3、WXML模板
- - （1）什么是WXML
  - （2）WXML 和 HTML 的区别
- 3.4、WXSS 样式
- - （1）什么是 WXSS
  - （2）WXSS 和 CSS 的区别
  - 3.5、JS 逻辑交互
4、小程序的宿主环境
- 4.1、宿主环境简介
- - （1）什么是宿主环境
  - （2）小程序的宿主环境
  - （3）小程序宿主环境包含的内容
5、协同工作和发布
- 5.1、协同工作
- 5.2、小程序成员管理
- - (1) 成员管理的两个方面
  - (2) 开发者权限说明
- 5.3、发布上线
- - (1) 小程序发布上线的整体步骤
  - (2) 基于小程序码进行推广
- 5.4、查看运营数据

1、小程序简介

1.1、什么是小程序

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

1.2、发展背景

随着APP市场的饱和，大部分用户已经养成了使用习惯，开发新的APP很难在市场生存。此外，APP开发和推广成本高也是不争的事实。易观2018年3月份的报告显示，移动电商APP的下载成本高达120-200 元，而且这些后期未必能形成转化。互联网金融、二手车电商APP的新客户成本，更是动辄高达数千元。

1.3、小程序与普通网页开发的区别

运行环境不同
- 网页运行在浏览器中
- 小程序（运行在微信环境中）
API不同

由于运行环境不用，所以小程序中，无法调用 DOM 和 BOM 的 API。

但是，小程序中可以调用微信环境提供的各种 API，例如：
- 地理定位
- 扫码
- 支付
开发模式不同

网页开发模式：浏览器 + 代码编辑器

小程序开发模式：
- 申请小程序开发账号
- 安装小程序开发工具
- 创建和配置小程序项目

1.4、主要优势

对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。对于用户来说，能够节约使用时间成本和手机内存空间；对于开发者来说也能节约开发和推广成本。

2、第一个小程序

2.1、注册小程序开发账号

点击注册按钮

微信小程序开发官网➡[微信公众平台 (qq.com)]

获取小程序的 APPID

2.2、了解微信开发者工具

(1)微信开发工具主要功能

快速创建小程序项目
代码的查看和编辑
对小程序功能进行调试
小程序预览和发布

(2)下载

网址➡微信开发者工具

(3)安装成功并运行登录后的结果

3、小程序代码的基本构成

3.1、项目结构

（1）了解项目的基本组成结构

pages用来存放所有小程序的页面
utils用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
appwxss小程序项目的全局样式文件
projectconfigjson项目的配置文件
sitemapjson用来配置小程序及其页面是否允许被微信索引

（2）小程序页面的组成部分

.js文件(页面的脚本文件，存放页面的数据、事件处理函数等)
.json文件(当前页面的配置文件，配置窗口的外观、表现等)
.wxml文件(页面的模板结构文件)
.wxss文件(当前页面的样式表文件)

3.2、JSON 配置文件

（1）JSON配置文件的作用

JSON是一种数据格式，在实际开发中，JSON总是以配置文件的方式的形式出现。小程序项目中也不例外：通过不同的 .json 配置文件，可以小程序项目进行不同级别的配置。

4种 json 文件，分别是：

app.json
project.json
sitemap.json
页面中的 .json（页面中的配置项会覆盖 app.json 的 window 中相同的配置项）

（2）新建小程序页面

只需要在 app.json -> pages 中新增页面的存放路径，小程序开发工具即可帮我们自动创建对应的页面文件。

如图所示：

（3）修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序，即可修改项目的首页。

如图所示：

3.3、WXML模板

（1）什么是WXML

WXML（Weixin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似网页开发的 HTML。

（2）WXML 和 HTML 的区别

标签名称不同
- HTML（div,span,img,a）
- WXML（view,text,image,navigator）

属性节点不同

```
<a href="#">超链接</a>
```

<navigator url="/pages/home/home"></navigator>

提供了类似 Vue 中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染

3.4、WXSS 样式

（1）什么是 WXSS

WXSS （Weixin Style Sheets）是一套样式语言，用于描述 WXML 的组建样式，类似于网页开发的 CSS。

（2）WXSS 和 CSS 的区别

新增 rpx 尺寸单位
- CSS 中需要手动进行像素单位换算，例如 rem
- WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
- 项目根目录的 app.wxss 会作用于所有小程序页面
- 局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等为类选择器

3.5、JS 逻辑交互

小程序中的 JS 文件分为三大类，分别是：

app.js

微信小程序开发学习—Day1相关推荐
1. 微信小程序开发学习5（自定义组件）
  微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
2. 微信小程序开发学习4（视图与逻辑）
  微信小程序开发学习4(视图与逻辑) 1.学习目标能够知道如何实现页面之间的导航跳转能够知道如何实现下拉刷新效果能够知道如何实现上拉加载更多效果能够知道小程序中常用的生命周期函数 2.页面导航 ...
3. web前端-微信小程序开发学习
  web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
4. 微信小程序开发学习6（基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】）
  微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包小程序对npm包的支持目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
5. 微信小程序开发学习2（模板与配置）
  微信小程序开发学习2(模板与配置) 1.学习目标能够使用WXML模板语法渲染页面结构能够使用WXSS样式美化页面结构能够使用app,json对小程序进行全局性配置能够使用page.json对小 ...
6. bilibili微信小程序开发学习总结
  bilibili微信小程序开发学习总结用来半天学习了微信小程序模仿做了个B站小程序,其实如果有编程基础特别熟悉Vue语法与web的话那小程序基本就是随便玩玩,整体写法与vue一致,页面搭建与web也 ...
7. 【微信小程序开发学习篇】
  微信小程序开发学习篇概述相关信息笔记制作时间:2022-9-25 参考视频:黑马视频参考文档:微信小程序官方开发文档文章目录微信小程序开发学习篇概述相关信息小程序基础 1.数据绑定与 ...
8. 微信小程序开发学习1（小程序的入门知识）
  微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面的几个组成部分能够知道小程序中常见的组件如何使用能够知 ...
9. 微信小程序开发学习笔记一
  微信小程序学习笔记(一) 环境使用及创建项目文件目录设置 JS文件环境使用及创建项目环境使用:微信开发者工具一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
最新文章
热门文章

微信小程序开发学习—Day1