揭秘爆款的小程序,为何一黑到底

文章目录

  • 前言
    • ⛳️ 1.什么是小程序?
    • ⛳️ 2.小程序发展史
    • ⛳️ 3.小程序原理
    • ⛳️ 4.如何开发微信小程序
    • ⛳️ 5.小程序的学习资源
    • ⛳️ 6.第一个微信小程序

前言

小程序,由于其便捷的操作,以及丰富的功能,已经普及到了生活中的各个领域,有很多人对于小程序的了解仅仅是会使用的状态,对于系统的东西却不了解,今天就来揭秘一下小程序。

⛳️ 1.什么是小程序?

在这里插入图片描述

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
小程序,很多商家都比较熟悉,由于其便捷的操作,以及丰富的功能,已经普及到了生活中的各个领域。无论是外卖、跑腿、招聘还是租房住房都能见到小程序的身影。
微信小程序是微信推出的轻量化应用,相当于是一个简便的app,他有不用下载、即点即用、用完就走的特点,而且小程序由于其性质的影响,用起来也不占据内存,能做为很多细分场景的应用工具,所以深受用户的喜爱。

📢📢📢 微信小程序的优势
在这里插入图片描述

其实如果你玩过微信小程序,你就能发现流畅度以及体验方面,小程序是完胜的本质其实就是hybrid(混合)的app介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台,维护成本也相当原生app较低,开发迭代速度也比较快
放一张对比图,可以看出微信小程序的优势

在这里插入图片描述
📢📢📢 小程序能帮我们解决什么?

1.附近的小程序的搜索范围是5公里,也就意味着它把商户的辐射面积增加到了5公里,
5公里以内的所有微信用户都能成为你的消费者。
2.小程序用低廉的价格能达到极好的宣传效果以及市场效应。想达到同样效果,
小程序的价格只是线下宣传开销的一点零头。
3.小程序是只属于自己,让商户不再为平台打工。入驻58,大众点评,为了一点曝光度以及线上的市场,
辛辛苦苦做活动,做推广,却只成全了平台。吸引来的流量被平台推荐到其他店家。
小程序能增加企业和商户的曝光度,能打开线上的广大市场,最重要的是让商户能真正地为自己打工。
4.许多电商自建小程序,特别是线下的零售结合新零售,这种特别符合购物型的体验,
特别符合老用户的复购。除了拉新和维系老用户,以及让传统线下用户去为他的用户提供额外的服务。

在这里插入图片描述

⛳️ 2.小程序发展史

在这里插入图片描述

大概有1/3的人有使用过小程序,现在应该会有更多。我们简单回顾一下微信小程序的发展历程,
微信小程序自2016年提出后,在同年9月份开始内测,到2017年1月9日的时候微信小程序正式开放,
到了大家真正所接受的是2017年12月28日,
就是微信小游戏开始开放的那一次,也就是大家所熟悉的跳一跳,
那个时候微信小程序才被大家广泛的认识起来。

⛳️ 3.小程序原理

小程序是一种新的开放能力,开发者可以快速的开发一个小程序,
小程序可以在微信内被快捷的获取和传播,同时具有出色的使用体验。
那么小程序实现的原理是什么?

在这里插入图片描述

第一是它的渲染层,就是他的Webviews,
第二个是它的逻辑层,就是我们写业务逻辑实现登录功能和支付功能,
第三个可以理解为微信原生的能力。

📢📢📢 Webviews

Webviews的话主要负责渲染,底层微信提供更多的底层的能力。
我们可以看到微信把很多的丰富的原生客户端以及它自己的这些能力提供到了给了开发者。
比如说网络,发起网络请求,存储和下载,存储包括文件的读写、音视频的读写,登录是微信版,形成关系连。
组件就是我们常用的组件,包括这里面还有硬件给到开发者,包括音视频的录制、摄像头,还有拍照、扫码等。

📢📢📢 逻辑层

可以看到这里是通过事件以及返回数据来进行传递的。
当用户它在界面上有一些操作行为的时候,就会触发一些事件,给到原生Webviews,再到业务逻辑。

📢📢📢 微信原生能力

有过小程序开发者经验的都知道,我们写了一个叫WXM2的东西,定义成Javascript,
和业务一起打包形成小程序。

⛳️ 4.如何开发微信小程序

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

小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性。
对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。
​网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,
而在小程序中,二者是分开的,分别运行在不同的线程中。
网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。
而如上文所述,小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,
并没有一个完整浏览器对象,因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库,
例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,
所以一些 NPM 的包在小程序中也是无法运行的。
​网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,
在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端,
以及用于辅助开发的小程序开发者工具,小程序中三大运行环境也是有所区别的

📢📢📢小程序的运行环境
在这里插入图片描述

​网页开发者在开发网页的时候,只需要使用到浏览器,并且搭配上一些辅助工具或者编辑器即可。
小程序的开发则有所不同,需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

📢📢📢 开发微信小程序的准备工作

  1. 注册小程序:
    在微信公众平台注册一个小程序账号,已有账号可以跳过注册流程。
  2. 登录:
    登录后,在菜单“设置”-“开发设置”当中的开发设置获取AppID备用,并在其配置服务器域名、消息推送等等。
  3. 下载微信小程序开发工具:
    小程序最终只能在其专门的开发工具上运行、发布等操作。
  4. 下载HBuilder X开发工具:选择了uniapp框架,可以利用HBuilder X进行开发,方便快捷,大大增加开发效率,值得推荐。还可以利用脚手架方式,但我个人不推荐。5. 小程序运行配置:在HBuilder X编辑器顶部菜单 “设置”-“运行配置”-“小程序运行配置”-“微信开发者工具路径”-“浏览”,找到微信开发者工具的安装目录,选取“微信开发者工具.exe”。

在这里插入图片描述

⛳️ 5.小程序的学习资源

📢📢📢 小程序开发文档

首先要明确的是,小程序开发不同于Python开发,后者是一项通用的开源的编程语言,所以会有很多人来替它撰写教程;而前者,则是腾讯公司旗下微信产品中的一个开发框架,是一个纯商业的技术。因此,你可以想一想,谁最希望别人可以学会小程序开发?自然是腾讯官方。越多人会用小程序开发产品,微信的生态就越活跃。所以小程序最佳的入门学习资源就是腾讯官方的小程序开发文档。
这个文档里面讲解了如何从申请账号到上线运营、给出了开发上手指南和功能体验Demo、包含了完整的API接口和配置说明,是微信小程序最完整最权威的介绍。对于一个已有 JS 和 Web 开发经验的人来说,可以很快上手开发。所以我曾经对学员说,你看官方文档就足够了。

在这里插入图片描述

⛳️ 6.第一个微信小程序

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。
跟随这个步骤,开始你的小程序之旅吧!

申请帐号
进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

在这里插入图片描述

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。
登录 小程序后台 ,我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

在这里插入图片描述

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。有了小程序帐号之后,我们需要一个工具来开发小程序。
稳定版 Stable Build (1.06.2206090)
根据自己的操作系统下载对应的安装包进行安装,

你的第一个小程序
新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,
勾选 “不使用云服务” (注意: 你要选择一个空的目录才可以创建项目),
点击新建,你就得到了你的第一个小程序了,
点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

在这里插入图片描述

接下来我们来预览一下这个小程序的效果。
点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,
通过微信的扫一扫在手机上体验你的第一个小程序。

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38479.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开始第一个基于uni-app的微信小程序开发

微信小程序 uni-app开发工具创建uni-app项目运行项目页面显示以及调试 uni-app uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝&#…

微信小程序开发大坑盘点

微信小程序开发大坑盘点 起因 前几天心血来潮,想给学校设计个一站式校园小程序,可以查询成绩,考试信息,课表之类的(本来想法里是还想包括一些社交功能的,但这个因为资质问题暂且搁置了)。其实…

那些年我们在微信小程序遇到的坑

前言 本篇主要记录一下我在开发中遇到的小程序的坑,还有实现的功能。 避坑 坑一:开发工具配置 (1)控制台如果报proxy代理相关错误,先检查左上角菜单栏中设置>代理设置>使用系统代理 (2&#xff09…

使用uniapp微信公众号和小程序踩坑全过程

什么是微信公众号?它的本质是什么 什么是微信公众号 微信公众平台,简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号,最终定位为“公众平台”。 微信公众号包含了:订阅号,服务号和企业号,各…

多端开发框架uni-app入坑指南,一套代码适用微信、头条等小程序

前言 hello 小伙伴们,现在我已经正式入坑 uni-app 了。uni-app 已经发布好几个月了,期间也是踩坑无数,但是官方秉承着不抛弃不放弃的精神,积极解决开发者的各种简单的、复杂的问题,在此表示感谢。我想还有小伙伴正在持…

基于uniapp开发 微信小程序登陆页面一

此微信登陆页面是参考uniapp开发文档 uniapp一键登录和button组件中的getphonenumber方法 代码展示 <template><view class"login-container"><buttonclass"btn-login"open-type"getPhoneNumber"getphonenumber"handleLog…

uniapp之微信小程序开发——目前遇到的坑

文章目录 微信小程序开发教程目录写在开头所谓的坑1. main.js你最好别瞎改2. uniapp中创建云函数3. 云函数安装其他npm依赖包4. 小程序端API和服务端API有何异同5. 去除button默认样式6. 组件中使用v-if不能用7. websocket使用 总结 微信小程序开发教程目录 正篇 1 【约球onli…

Uniapp小程序登录和登录验证

小程序的登录验证流程图&#xff1a; 第一步&#xff1a;获取微信用户的基本信息&#xff1a; 调用getUserProfile方法&#xff0c;获取用户基本信息 methods:{getUserProfile(){desc:"完善用户信息"&#xff0c;success:(res)>{this.saveUserInfo(res.userInfo) …

采用uni-app开发的多端圈子社区论坛系统

采用uni-app开发的多端圈子社区论坛系统 系统基于TP6 Uni-app框架开发&#xff1b;客户移动端采用uni-app开发&#xff0c;管理后台TH6开发。 系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步&#xff0c;可快速打包生成APP。 拥有完善的后台管理&#xff0c;不…

uniapp之uni-starter小程序多端研发框架搭建与项目实践

随着移动互联网的飞速发展&#xff0c;无数移动APP琳琅满目&#xff1b;在移动App的发展的基础上&#xff0c;衍生了小程序、轻应用技术&#xff0c;它随时可用&#xff0c;但又无需安装卸载。 小程序是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”…

【记录】基于uni-app开发的微信小程序商城项目

一、项目基本结构 &#xff08;一&#xff09;tabbar页面 首页 分类 购物车 我的(用户中心) &#xff08;二&#xff09;非tabbar页面 搜索 商品列表 商品详情 微信支付 结构解析&#xff1a; 1. 构建一个小程序&#xff0c…

【uni-app项目】瑞幸咖啡小程序

技术栈 框架:uni-appui库:uview-ui编辑器:HBuilderXapi文档 api目前只有商品信息,之前完整版api文档不知道被我丢哪里去了,需要的话请订阅后私聊邮箱 功能描述 使用uni-app框架,仿照瑞幸小程序前端,与后端api对接(使用网上的接口),动态处理数据 功能如下 (注意!…

不同平台使用不同技术实现微信好友、朋友圈分享汇总(H5、taro、uni-app)

人生路漫漫&#xff0c;坑&#xff0c;是活久了见。程序猿世界里各种奇葩的需求都有&#xff0c;随之而来的各种坑也是层出不穷。 应前IBM同事邀请特来做分享的专题总结。一般人我不告诉他&#xff0c;刷到的朋友们就赚到了&#xff0c;你懂的~~~~~~收藏吧&#xff01; 事情前…

关于我在uni-app练手中遇到的坑

目录 页面层级结构的加载和回退 filePath编码 对象的深度克隆 弹幕的加载 ​编辑 uni-app内置浏览器加载视频失败 后台报错 java.io.IOException: 你的主机中的软件中止了一个已建立的连接 安卓里遍历uni-list-item错误 手机自带浏览器无法加载视频 乱码问题 video中…

【哈士奇赠书活动 - 17期】-〖uni-app跨平台开发与应用从入门到实践〗

文章目录 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单 ❤️‍&#x1f525; 赠书活动 - 《uni-app跨平台开发与应用从入门到实践》…

1个月uni-app微信小程序开发上线实战专栏介绍

一、专栏介绍&#xff1a; 《uni-app开发微信小程序1个月上线实战》&#xff0c;目标带领1000位同学成功开发上线一个自己的个人小程序&#xff01; 作者介绍&#xff1a;国服第二切图仔——资深前端开发工程师&#xff0c;具有六年以上的前端开发经验&#xff0c;曾在多家知…

深入浅析,一步步用GPT打造你的聊天机器人

使用GPT基于你自己的文档构建聊天机器人的分步指南。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 与ChatGPT聊天很有趣&#xff0c;而且信息量很大 —— 与它闲聊可以探索一些新的想法。但这些都是比较随意的用例&#xff0c;新奇感很快…

深入理解Python中的依赖注入

一文带你深入了解Python依赖注入。 微信搜索关注《Python学研大本营》&#xff0c;加入读者群&#xff0c;分享更多精彩 简介 依赖注入是软件工程中使用的一种设计模式&#xff0c;它允许在创建对象时由外部提供其依赖关系&#xff0c;而不是自己创建这些依赖关系。换句话说&a…

独立开发变现周刊(第84期):一个地理位置API服务,月收入1.5万美元

分享独立开发、产品变现相关内容&#xff0c;每周五发布。 (合集&#xff1a;https://ezindie.com/weekly ) 目录 1、tiny.host: 简单部署你的web项目2、Verif Tools: 一个在线虚拟身份信息生成器3、screen.studio: 一个桌面端的录屏编辑工具4、一个地理位置API服务&#xff0c…

李彦宏:十年后不会写提示词或被淘汰;GitHub发布Copilot X,动动嘴就能生成代码;Vite 4.2 发布|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…