微信小程序(一)初步,包括(初步了解微信小程序,小程序项目结构,小程序宿主环境,发布与上线等)
文章目录
- 前言
- 一 微信小程序
- 1. 小程序与普通网页开发的区别
- 2. 注册小程序开发帐号
- 3. 安装开发者工具
- 4. 创建小程序项目
- 5. 查看项目效果
- 6. 主界面的 5 个组成部分
- 二 项目结构
- 1. 了解项目的基本组成结构
- 2. 小程序页面的组成部分
- 3. JSON 配置文件
- 3.1 app.json 文件
- 3.2 project.config.json 文件
- 3.3 sitemap.json 文件
- 3.4 页面的 .json 配置文件
- 3.5 新建小程序页面
- 3.6 修改项目首页
- 4. WXML 模板
- 5. WXSS样式
- 6. JS 逻辑交互
- 三 小程序的宿主环境
- 1. 什么是宿主环境
- 2. 小程序的宿主环境
- 3. 通信模型
- 4. 运行机制
- 四 宿主环境 - 组件与API
- 1. 小程序中组件的分类
- 2. 常用的视图容器类组件
- 3. view 组件的基本使用
- 4. scroll-view 组件的基本使用
- 5. swiper 和 swiper-item 组件的基本使用
- 6. swiper 组件的常用属性
- 7. 常用的基础内容组件
- 8. 其它常用组件
- 9. API
- 五 成员管理与发布和上线
- 成员管理的两个方面
- 添加项目成员和体验成员
- 上传代码
- 在后台查看上传之后的版本
- 提交审核
- 发布
- 基于小程序码进行推广
- 查看小程序运营数据的两种方式
前言
本文包含 微信小程序初步 等内容,参考于 黑马PPT 通过自己理解整理,所以这是一篇用于小白新手入门,或者复习使用的笔记,主要包括(初步了解微信小程序,小程序项目结构,小程序宿主环境,发布与上线等)
如有做的不好的地方,敬请谅解,欢迎指出,持续更新改正
一 微信小程序
1. 小程序与普通网页开发的区别
- 运行环境不同
网页运行在浏览器环境中
小程序运行在微信环境中 - API 不同
由于运行环境的不同,所以小程序中,
无法调用 DOM 和 BOM 的 API。
但是,小程序中可以调用微信环境提供
的各种 API,例如:- 地理定位
- 扫码
- 支付
- 开发模式不同
网页的开发模式:浏览器 + 代码编辑器
小程序有自己的一套标准开发模式:- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
2. 注册小程序开发帐号
https://mp.weixin.qq.com/
3. 安装开发者工具
微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:
- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行调试
- 小程序的预览和发布
推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载页面的链接如下:
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
代理模式修改 代理模式修改 代理模式修改
4. 创建小程序项目
- 点击“加号”按钮
- 填写项目信息, AppID, 目录
- 不使用云服务
5. 查看项目效果
编译: 可以在开发者工具上查看效果
预览: 会生成二维码, 在手机上扫描查看效果
6. 主界面的 5 个组成部分
二 项目结构
1. 了解项目的基本组成结构
pages 用来存放所有小程序的页面
- utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
- app.wxss 小程序项目的全局样式文件
- project.config.json 项目的配置文件
- sitemap.json 用来配置小程序及其页面是否允许被微信索引
2. 小程序页面的组成部分
小程序官方建议把所有小程序的页面,都存放在 pages 目录
中,以单独的文件夹
存在,如图所示:
其中,每个页面由 4 个基本文件
组成,它们分别是:
.js
文件(页面的脚本文件,存放页面的数据、事件处理函数等).json
文件(当前页面的配置文件,配置窗口的外观、表现等).wxml
文件(页面的模板结构文件).wxss
文件(当前页面的样式表文件)
3. JSON 配置文件
JSON 是一种数据格式
,在实际开发中,JSON 总是以配置文件
的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。
小程序项目中有 4 种 json 配置文件,分别是:
- 项目根目录中的
app.json
配置文件 - 项目根目录中的
project.config.json
配置文件 - 项目根目录中的 sitemap.json 配置文件
每个页面文件夹中的 .json 配置文件
3.1 app.json 文件
app.json 是当前小程序的全局配置,包括了小程序的
所有页面路径
、窗口外观
、界面表现
、底部 tab
等。
Demo 项目里边的 app.json 配置内容如下:
简单了解下这 4 个配置项的作用:
pages
:用来记录当前小程序所有页面的路径window
:全局定义小程序所有页面的背景色、文字颜色等style
:全局定义小程序组件所使用的样式版本- sitemapLocation:用来指明 sitemap.json 的位置
3.2 project.config.json 文件
project.config.json 是项目配置文件,用来记录我们对
小程序开发工具所做的个性化配置
,例如:
setting
中保存了编译
相关的配置projectname
中保存的是项目名称
appid
中保存的是小程序的账号 ID
3.3 sitemap.json 文件
微信现已开放
小程序内搜索
,效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引
。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
注意: sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件
project.config.json 的 setting 中配置字段 checkSiteMap 为 false
3.4 页面的 .json 配置文件
小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置
,页面中的配置项会覆盖 app.json 的 window 中相同的配置项
。
3.5 新建小程序页面
只需要在
app.json -> pages
中新增页面的存放路径,小程序开发者工具即可帮我们自动创建
对应的页面文件
如图所示
3.6 修改项目首页
只需要调整
app.json -> pages
数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染,
4. WXML 模板
WXML(WeiXin Markup Language)是小程序框架设计的一套
标签语言
,用来构建小程序页面的结构
,其作用类似于网页开发中的 HTML
H T M L 和 W X M L 区别 HTML 和 WXML区别 HTML和WXML区别
标签名称不同
- HTML (div, span, img, a)
- WXML(view, text, image, navigator)
属性节点不同
- <a href=“#”>超链接
- <navigator url=“/pages/home/home”>
提供了类似于 Vue 中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
5. WXSS样式
WXSS (WeiXin Style Sheets)是一套
样式语言
,用于描述 WXML 的组件样式,类似于网页开发中的 CSS
W X S S 和 C S S 的区别 WXSS 和 CSS 的区别 WXSS和CSS的区别
新增了 rpx 尺寸单位
- CSS 中需要手动进行像素单位换算,例如 rem
- WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算
提供了全局的样式和局部样式
- 项目根目录中的 app.wxss 会作用于所有小程序页面
- 局部页面的 .wxss 样式仅对当前页面生效
WXSS 仅支持部分 CSS 选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等伪类选择器
6. JS 逻辑交互
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。
小程序中的 JS 文件分为三大类,分别是:
- app.js
- 是整个小程序项目的
入口文件
,通过调用App() 函数
来启动整个小程序
- 是整个小程序项目的
- 页面的 .js 文件
- 是页面的入口文件,通过调用
Page() 函数
来创建并运行页面
- 是页面的入口文件,通过调用
- 普通的 .js 文件
- 是
普通的功能模块文件
,用来封装公共的函数或属性
供页面使用
- 是
三 小程序的宿主环境
1. 什么是宿主环境
宿主环境
(host environment)指的是程序运行所必须的依赖环境
。例如:
Android 系统
和 iOS 系统
是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
2. 小程序的宿主环境
手机微信
是小程序的宿主环境,如图所示:
小程序借助宿主环境提供的能力
,可以完成许多普通网页无法完成的功能,例如:
微信扫码、微信支付、微信登录、地理定位、etc…
小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
3. 通信模型
小程序中通信的主体是渲染层
和逻辑层
,其中:
- WXML 模板和 WXSS 样式工作在渲染层
- JS 脚本工作在逻辑层
小程序中的通信模型分为两部分:
渲染层
和逻辑层
之间的通信- 由微信客户端进行转发
2.逻辑层
和第三方服务器
之间的通信 - 由微信客户端进行转发
- 由微信客户端进行转发
4. 运行机制
小程序启动
的过程
- 把小程序的代码包下载到本地
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件,
调用 App() 创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染
的过程
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板和 .wxss 样式
- 执行页面的 .js 文件,调用 Page() 创建页面实例
- 页面渲染完成
四 宿主环境 - 组件与API
1. 小程序中组件的分类
小程序中的组件也是由宿主环境提供的
,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
视图容器
基础内容
表单组件
导航组件
- 媒体组件
- map 地图组件
- canvas 画布组件
- 开放能力
- 无障碍访问
2. 常用的视图容器类组件
view
- 普通视图区域
- 类似于 HTML 中的 div,是一个块级元素
- 常用来实现页面的布局效果
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
swiper
和swiper-item
- 轮播图容器组件 和 轮播图 item 组件
3. view 组件的基本使用
4. scroll-view 组件的基本使用
5. swiper 和 swiper-item 组件的基本使用
6. swiper 组件的常用属性
7. 常用的基础内容组件
text
- 文本组件
- 类似于 HTML 中的 span 标签,是一个行内元素
rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
8. 其它常用组件
button
- 按钮组件
- 功能比 HTML 中的 button 按钮丰富
- 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
image
- 图片组件
- image 组件默认宽度约 300px、高度约 240px
navigator
- 页面导航组件
- 类似于 HTML 中的 a 链接
9. API
小程序中的 API 是由宿主环境提供的
,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
小程序官方把 API 分为了如下 3 大类:
事件监听 API
- 特点:以
on
开头,用来监听某些事件的触发 - 举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
- 特点:以
同步 API
- 特点1:以
Sync
结尾的 API 都是同步 API - 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
- 特点1:以
异步 API
- 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
- 举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
五 成员管理与发布和上线
一个小程序的发布上线,一般要经过
上传代码
->提交审核
->发布
这三个步骤
成员管理的两个方面
小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
- 项目成员:
- 表示参与小程序开发、运营的成员
- 可登录小程序管理后台
- 管理员可以添加、删除项目成员,并设置项目成员的角色
- 体验成员:
- 表示参与小程序内测体验的成员
- 可使用体验版小程序,但不属于项目成员
- 管理员及项目成员均可添加、删除体验成员
添加项目成员和体验成员
上传代码
- 点击开发者工具顶部工具栏中的“
上传
” 按钮 - 填写
版本号
以及项目备注
在后台查看上传之后的版本
登录小程序管理后台 -> 管理 -> 版本管理 -> 开发版本
,即可查看刚才提交上传的版本了:
提交审核
- 为什么需要提交审核:为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过腾讯官方审核的。
- 提交审核的方式:在开发版本的列表中,点击“提交审核”按钮之后,按照页面提示填写相关的信息,就能把小程序提交到腾讯官方进行审核。
发布
审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时在审核版本的列表中,点击“
发布
”按钮之后,即可把“审核通过
”的版本发布为“线上版本
”,供所有小程序用户访问和使用
基于小程序码进行推广
相对于普通二维码来说,小程序码的优势如下:
- 在样式上更具辨识度和视觉冲击力
- 能够更加清晰地树立小程序的品牌形象
- 可以帮助开发者更好地推广小程序
获取小程序码的 5 个步骤:
登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载
查看小程序运营数据的两种方式
在“小程序后台”查看
- 登录小程序管理后台
- 点击侧边栏的“统计”
- 点击相应的 tab 可以看到相关的数据
使用“小程序数据助手”查看
- 打开微信
- 搜索“小程序数据助手”
- 查看已发布的小程序相关的数据
微信小程序(一)初步,包括(初步了解微信小程序,小程序项目结构,小程序宿主环境,发布与上线等)相关推荐
- WEB项目结构小教程
!!!∑(゚Д゚ノ)ノ项目结构是啥????? 不急不急,让我来告诉你 一.最最最基础的WEB项目结构: 将它展开: src: 我们会将java代码写在这个文件夹下面. 步骤: src 右键 --> ...
- WeChat之小工具:基于C++程序代码设计的查看微信撤销、撤回消息(包括文本、图片、视频等)GUI小工具
WeChat之小工具:基于C++程序代码设计的查看微信撤销.撤回消息(包括文本.图片.视频等)GUI小工具 导读 哈哈,千万不要给程序猿随便发信息,程序猿认真起来,别说你发的微信信息,就连你 ...
- 微信小程序—for循环包括自定义for循环中的item和index(图文)
微信小程序-for循环包括自定义for循环中的item和index <view wx:for="{{list}}" wx:key="{{index}}"& ...
- mpvue 微信小程序_使用Vue.js开发微信小程序:开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 微信小程序学习(四):微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库 我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题 这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...
- mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹 自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
- 微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
- “小程序”的最佳入口位置--关于微信小程序的思考笔记
看到一位前辈撰文[1]阐述微信小程序提出入口位置包括两个:1. 传统的微信订阅号/服务号会话入口:2. "发现"栏朋友圈/摇一摇/扫一扫按钮之外的大片空白区域,除了腾讯预留的 VI ...
最新文章
- linux 网卡丢弃多播包,rp_filter及Linux下多网卡接收多播的问题
- Python 在字符串中处理html 和xml
- 《C专家编程》第三章——分析C语言的声明
- 华为阅读下载的文件在哪里找_华为手机还要天天清理内存?1键关闭这2个设置,手机用到2035年...
- django 1.8 官方文档翻译: 6-1-1 Django 的设置
- 小记:iOS 中一般对于 view 不依赖 model 的的两种代码书写形式
- Rust常用编程概念之变量和可变性
- 《我的祖国》正确英译应该是《The Evercountry, Mine》
- Python3面向对象:实例(instance)
- Vue-多个Vue实例、注册全局组件,Fetch、axios
- 苹果U盘格式化了怎么恢复
- 计算机基础达 打字训练视频,「跟着八戒学电脑」快速打字必须掌握的基本功:指法练习...
- c语言 拟合指数函数的代码,如何找到拟合指数函数的x?
- python另存为excel_为什么不能从python代码中“另存为”Excel文件?
- 计算机组装与系统安装实验目的,计算机原理与系统组装实验
- svg中 path标签的d属性
- Nginx 基本理论和安装
- ES6 findIndex()返回结果有true,却返回的索引位置一直是-1
- html个个代码的意思,网页HTML中各个代码意思大全
- 电脑系统怎么重装?保姆级Windows 8系统安装教程
热门文章
- 数字化首个安全生产标准 阿里云联合信通院发布《基于云计算的数字化业务安全工程要求》
- ubuntu W: GPG 错误:http://ppa.launchpad.net/fossfreedom/indicator-sysmonitor/ubuntu xenial InRelease:
- 为什么选择快速开发?
- Hive CTE与子查询
- APP测试设计测试用例的要点
- 不吹牛,看完一起加油!在家闷声搞钱!一个月有7000多
- 利用selinum爬取咪咕音乐歌单信息源代码分享
- 数字化城管智能视频分析应用系统 助力非现场高效执法
- MAC地址数据位组成介绍
- 我的北航MEM之路 MEM备考经验分享