《微信小程序开发实战》学习笔记chapter1微信小程序人门
Chapter01 微信小程序入门
1. 微信小程序介绍
1.1 什么是微信小程序
微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用。微信小程序和微信的原生功能应用在本质上是一样的,都是Web App。
微信小程序与原生App的关系图:
补充:
小程序
(1)小程序:是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用。从2017年微信首次推出小程序开始,经过四年发展,11大平台推出各自小程序生态,小程序成为真正意义上的中国人定义的“互联网新技术标准”。
(2)行业概况:随着小程序的不断发展,截至2021年上半年,全网小程序数量突破700万个,其中,微信小程序是行业主流,数量超过430万个,占比高达约61.43%。
其中,微信小程序的行业概况:
2020年,我国微信小程序日活跃用户数(DAU,Daily Active User) 超过4亿,同比增长21.2%;活跃小程序增长75%。
2021年,我国微信小程序日活跃用户数超过4.5亿,同比增长12.5%;活跃小程序则增长 41%。
[资料来源] 华经产业研究院发布的《2021-2026年中国微信小程序市场深度分析及投资战略咨询报告》
微信小程序与微信订阅号、服务号的区别
对比项 小程序 订阅号和服务号 加载及组件 加载慢,专门提供组件 加载快,使用风格统一且近乎原生的页面组件 运营后台 实时数据 非实时数据 接口数量 丰富的接口,如文件操作、设备相关、动画等 接口数量比较少,只提供有限的功能,受限于浏览器
拓展:
Web App(网页应用)是一种通过H5页面技术实现的,和Native App的功能和界面几乎一样的手机App形态。
Native APP(本地应用)指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强,需要用户下载安装使用。
项目 Web App(网页应用) Hybrid App(混合应用) Native App(原生应用) 开发成本 低 中 高 维护更新 简单 简单 复杂 体验 差 优 优 Store或market认可 不认可 认可 认可 安装 不需要 需要 需要 跨平台 优 优 差 Native APP遇到的三大困境:
(1)虽然用户手机里的Native APP数量在增多,但日均启动个数却在减少;
(2)用户的使用时长不断向高频Native APP集中,加剧了头部效应;
(3)对于低频和不知名的Native App,则面临着更严峻的“分发”和“使用”长尾困境。
这三大困境对开发者形成了较大的挑战:
大部分低频和不知名Native App在应用商店少人问津,无法到达用户手机。数据显示,应用商店下载量最大的前1000个(数量占比不足0.1%)App,占据了总下载次数的一半以上。这说明用户在下载应用时“马太效应”明显。
在应用使用率上,用户下载之后极少使用,要用时却想不起或找不到它,甚至是六成的Native APP被下载安装后一周内并未被使用,其中又有约1/3在一个月内都未被使用,逐渐成为“僵尸应用”。
微信小程序与Native APP(本地应用)、Web App(网页应用)的区别:
对比项 小程序 Native APP Web App 下载 无需下载,通过扫码等方式获取 从iOS和Android应用商店中下载 无需下载通过浏览器进入 安装 无需安装 安装在手机中占用存储空间 无需安装 升级 无需升级 需要升级操作 无需升级 开发成本 开发周期短 开发周期长 开发周期适中 开发周期 开发成本低 开发成本高 开发成本适中
1.2 微信程序的优势
1.微信有庞大的用户量,用户粘性很高,基于微信开发产品更容易触达用户。
[用户粘性] 用户使用互联网产品产生的持续使用意愿。粘性是用户由于承诺再使用产品,无论外部环境如何变化或营销如何努力,用户仍然坚持重复访问和使用同一产品,粘性可以看作是与持续使用类同的一种行为。
2.微信小程序推广成本低。因为小程序无需安装,用户扫一扫或搜一下即可打开的特点,使其市场接受度很高,用户愿意使用小程序,使得小程序的推广阻力大大的减弱,加上小程序有着微信这个大靠山,传播起来更是得心应手,推广成本不高。而APP本身很多用户就不喜欢,要下载还要安装,成功推广一个要花很大的成本。
3.微信小程序的开发成本低。因为相对而言,无论是网站建设还是APP开发,成本往往都比小程序要高,而且开发适配成本低。具体而言,一是小程序开发只需要一个端口,是基于微信框架搭建的程序,而APP需要开发苹果和安卓两个端口的软件。二是小程序的开发周期短,由于小程序的开发简单,开发周期一般在2-5周,而APP由于双平台的原因,开发周期为3-4个月左右。三是小程序开发相对APP来说,技术要求要简单一点,企业可以把更多的时间和资金投入在运营上。四是APP上架需要向十几个应用商店提交,且各个应用商店所需要的材料和审核标准都不同,所以非常繁杂,而小程序只需要向微信公众平台提交,审核通过即可上线。
4.小程序的运营小程序很低。只需要简单的维护运营即可,操作都比较简单,容易管理。
5.容易小规模试错,然后快速迭代。
6.跨平台。
2. 开发环境搭建
2.1 注册账号
网页地址(微信公众平台):小程序
一个邮箱仅能申请一个小程序。
2.2 APPID
网页地址(微信公众平台|小程序):
开发 ——> 开发管理 ——> 开发设置 ——> 开发者ID ——> AppID(小程序ID):*********
2.3 开发工具
微信开发者工具:win7版本只能适合1.05及以下的版本,下载地址 微信开发者工具 1.05.2204250 Stable 更新说明 | 微信开放社区
编译器:如VS Code、Pycharm等。
[“Visual Studio Code(简称“VS Code”)] 是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行,并且可用于Windows,macOS和Linux。”
数据库:如MySQL、SQLserver等。
数据库可视化工具:如Navicat等。
后端工具:如Vue等。
3. 微信开发者工具
3.1 创建项目
第一步,选择目录,新建微信小程序代码存放文件夹(Test1);
第二步,复制粘贴自己的APPID;
第三步,选择后端服务不使用云开发。
3.2 微信开发者工具界面介绍
详见【微信官方文档】工具:概览 | 微信开放文档
调试器:
1.console:控制台,可以用来打印值。
2.wxml : 页面文件,可定位左侧看到的标签。
【调试器类似于Google Chrome浏览器中的开发者工具】: Console:控制台面板,用于输出调试信息,也可以直接编写代码执行。 Sources:源代码面板,可以查看或编辑源代码,并支持代码调试。 Network:网络面板,记录网络请求信息,根据它可进行网络性能优化。 Security:安全面板,用于调试页面的安全和认证等信息,如HTTpS。AppData:App数据面板,可以查看或编辑当前小程序运行时的数据。 Audits:审计面板,用于对小程序进行体验评分。 Sensor:传感器面板,用于模拟地理位置、重力感应。 Storage:存储面板,用于查看和管理本地数据缓存。 Trace:跟踪面板,用于真机调试时跟踪调试信息。 Wxml:Wxml面板,用于查看和调试WXML和WXSS。
3.3 微信开发者工具的快捷键
快捷键 | 功能描述 |
---|---|
Ctrl+/ | 注释或取消注释 |
Shift+Home | 选择从行首到光标处 |
Shift+End | 选择从光标到行尾 |
Ctrl+Shift+l | 选中所有匹配 |
Ctrl+Home | 移动到文件的开头 |
Ctrl+End | 移动到文件的结尾 |
Ctrl+I | 选中当前行 |
Ctrl+U | 光标回退 |
Ctrl+D | 选中匹配 |
Alt+Shift+Up | 向上复制一行 |
Alt+Shift+Down | 向下复制一行 |
Ctrl+Shift+[ | 折叠代码块 |
Ctrl+Shift+] | 展开代码块 |
Ctrl+Shift+Enter | 在当前行上插入一行 |
Alt+Up | 向上移动一行 |
Alt+Down | 向下移动一行 |
Ctrl+Shift+F | 全局搜索 |
Alt+Shift+F | 代码格式化 |
Ctrl+[ | 在当前行上插入一行 |
Ctrl+] | 向上移动一行 |
4. 微信小程序文件结构
4.1 微信小程序框架
与传统Web对比:
项目 | 微信小程序(四层结构) | 传统Web(三层结构) |
---|---|---|
结构 | WXML | HTML |
样式 | WXSS | CSS |
逻辑 | Javascipt | Javascipt |
配置 | JSON | 无 |
4.2 基本项目目录
详见【微信官方文档】指南:目录结构 | 微信开放文档
小程序包含一个描述整体程序的 app
和多个描述各自页面的 page
。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必需 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成,分别是:
文件类型 | 必需 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
pages 页面文件夹
utils 自己封装的工具函数
app.js 微信小程序的入口文件,全局的js(逻辑)文件。定义全局函数和数据,注册小程序。
app.json 全局的配置文件
app.wxss 全局样式文件
project.config.json 对应微信开发者工具的详情。类似node中的 package.json
4.3 配置介绍
一个小程序至少包括全局的app.js和页面的page.js两种配置文件。(配置文件中不能出现注释)
1. 全局配置app.json
app.json 包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等。
// 配置文件中不能出现注释,这里仅介绍文件结构使用,不能直接复制到小程序里执行。 {// 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。// 文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。// 添加页面可直接在pages下面增加一行【pages/index2/index2,】会自动新建一个index2的文件夹。"pages":["pages/index2/index2", // 对应index2文件夹,放在第一个位置,则启动时首先展示这个页面。"pages/index/index", "pages/logs/logs"],// 用于设置小程序的状态栏、导航条、标题、窗口背景色。"window":{"backgroundTextStyle":"light", // 下拉 loading 的样式,仅支持 dark / light"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色,如 #000000"navigationBarTitleText": "Weixin", //导航栏标题文字内容"navigationBarTextStyle":"black" // 导航栏标题颜色,仅支持 black / white},//底部按钮"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "image/tabar/index0.jpg", // 未选择时的图标 "selectedIconPath": "image/tabar/index1 (1).jpg" // 选择时的团标},{"pagePath": "pages/logs/logs","text": "日志","iconPath": "image/tabar/rizhi0.jpg","selectedIconPath": "image/tabar/rizhi1.jpg"},{"pagePath": "pages/index2/index2","text": "西瓜","iconPath": "image/tabar/index20.jpg","selectedIconPath": "image/tabar/index21.jpg"}]},"style": "v2", "sitemapLocation": "sitemap.json" }
2. 页面配置page.json
在pages/index1/index1.json文件中:
{"navigationBarBackgroundColor": "#ffcccc","navigationBarTitleText": "干饭人","navigationBarTextStyle": "white" }
4.4 数据绑定
//在pages/index1/index1.js文件中: Page({ /*** 页面的初始数据*/data: {msg: "hello", // 定义了一个叫msg的变量,冒号后要有一个空格mun: 99,isboy: false,person:{name:"小明",bumen:"搬砖部"},title:"你想吃啥?"},
//在pages/index1/index1.js文件中: <!-- pages/index1/index1.wxml --> <view>你是来自哪里的干饭人? //调用.js文件中的data数据<view>msg:{{msg}}</view><view>mun:{{mun}}</view><view>isboy:{{isboy}}</view><view>person.name:{{person.name}}</view><view>person.bumen:{{person.bumen}}</view> //组件属性<view data-id="{{title}}">title</view> //选中框的布尔属性要加大括号<view><checkbox checked="{{false}}"></checkbox></view> </view>
《微信小程序开发实战》学习笔记chapter1微信小程序人门相关推荐
- 小程序开发实战学习笔记
序言 原本题目写的时候实战经验,但是觉着算不上什么经验,就改成学习笔记了? 注册小程序账号 开发和发布流程 小范围讨论公公抽离之类 不写公共样式因为不知道别人会不会用你的 目录结构 小程序包含一个描述 ...
- 小程序开发实战学习笔记 1
注册小程序账号 开发和发布流程 小范围讨论公公抽离之类 不写公共样式因为不知道别人会不会用你的 目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 具体参见官方文档 生命 ...
- 唐金州的Vue开发实战学习笔记(基础篇)
Vue开发实战学习笔记 简易的Vue程序 组件 事件 插槽 单文件组件 双向绑定 虚拟DOM与key属性 组件更新 状态data与属性props vue的响应式更新 计算属性和侦听器 计算属性 com ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- “物联网开发实战”学习笔记-(四)智能音箱制作和语音控制
"物联网开发实战"学习笔记-(四)智能音箱制作和语音控制 这次来造一个属于自己的智能音箱,这里详细介绍了智能音箱的语音控制的实现. 智能音箱的技术架构 智能音箱主要涉及拾音.前端信 ...
- “物联网开发实战”学习笔记-(二)手机控制智能电灯
"物联网开发实战"学习笔记-(二)手机控制智能电灯 如果搭建好硬件平台后,这一次我们的任务主要是调试好智能电灯,并且连接到腾讯云的物联网平台. 腾讯云物联网平台 腾讯物联网平台的优 ...
- “物联网开发实战”学习笔记-(五)根据土壤湿度、环境温湿度和光照强度自动浇花
"物联网开发实战"学习笔记-(五)根据土壤湿度.环境温湿度和光照强度自动浇花 研究场景需求 自动浇花这个场景,很明显是为了自动控制水泵,及时给植物补充水分.同时用户的目的并不只是浇 ...
- 唐金州的Vue开发实战学习笔记(生态篇)
Vue开发实战学习笔记 Vuex Why Vuex How Vuex Vuex的核心概念和底层原理 Vuex的最佳实践 Vue Router Why Vue Router 路由类型及底层原理 Nuxt ...
最新文章
- linux sybase系统,linux sybase 安装全过程(写给初学者)
- LTE中QPSK、16QAM、64QAM
- Java多线程(1)—线程初探
- 基于Boost::beast模块的同步HTTP客户端
- 编写高质量代码:改善Java程序的151个建议(第1章:JAVA开发中通用的方法和准则___建议1~5)...
- 光纤收发器性能级别及价格介绍
- C++学习之路 | PTA乙级—— 1052 卖个萌 (20 分)(精简)
- jquery右下角自动弹出关闭层
- 指令重排序所带来的问题及使用volatile关键字解决问题
- 不限速的远程链接软件ToDesk
- 学习web前端,合理的学习路线,如何成为一个合格的前端工程师
- solr中facet及facet.pivot理解
- C语言数据结构双向链表之温故而知新
- Python语法都会,一写程序就懵,有解么?
- android 悬浮按钮点击展开动画,android仿微信浮窗的自动贴边可展开悬浮按钮-博客...
- ThinkPad 笔记本BIOS设置手册
- iOS中-Qutarz2D详解及使用
- C语言-字符0、数字0和‘\0’的区别
- 感谢十二年的陪伴——分享回归,不忘初心(Eastmount博客总结及未来规划)
- TensorFlow的几点小知识
热门文章
- 高德地图实现展示多个规划的路线
- Python入门(十八):MyQR 二维码制作
- hyperledger fabric 实战开发——水产品溯源交易平台(二)
- python 制作英文单词_python常用150个英文单词
- 网络基础 IP协议 子网划分 子网汇总 超网 无类间路由超详细介绍
- C#同步和异步(四)等待异步调用完成
- 阿里云搭建完全分布式
- python爬取视频自动播放_求助该网站如何让它能自动播放下一个视频。。。醉了,要挂80个课时...
- 为K8S集群申请Let‘s Encrypt证书
- 【Cocos Creator 实战教程(4)】——黄金矿工(上)(节点动作、碰撞体相关)