小程序介绍

    科技2022-08-23  139

    1. 小程序介绍

    微信小程序,简称小程序,英文名 Mini Program ,是一种不需要下载安装即可使用的应用,它实现 了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用

    1.1 为什么是微信小程序?

    微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户;推广app 或公众号的成本太高。小程序开发适配成本低。小程序容易小规模试错,然后快速迭代。小程序跨平台。

    1.2 微信小程序历史

    2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出, 越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没 有提供更好的服务,所以微信内部正在研究新的形态,叫微信小程序 需要注意的是,之前是叫 做 应用号2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引 起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云端服务器的技术方案。2017年1月9日,微信推出的“小程序”正式上线。“小程序”是一种无需安装,即可使用的手 机“应用”。不需要像往常一样下载App,用户在微信中“用完即走”。

    1.3 疯狂的微信小程序

    微信月活已经达到10.82亿。其中55岁以上的用户也达到6300万信息传达数达到450亿,较去年增长18%;视频通话4.1亿次,增长100%小程序覆盖超过200+行业,交易额增长超过6倍,服务1000亿+人次,创造出了5000亿+的商业价值

    1.4 还有其他的小程序不容忽视

    支付宝小程序百度小程序QQ小程序今日头条 + 抖音小程序

    2. 环境准备

    开发微信⼩程序之前,必须要准备好相应的环境

    2.1 注册账号

    建议使用全新的邮箱,没有注册过其他小程序或者公众号的。访问注册页面,耐心完成注册即可。

    2.2 获取APPID

    由于后期调用微信小程序的接口等功能,需要索取开发者的小程序中的 APPID ,所以在注册成功后, 可登录,然后获取APPID。登录,成功后可看到如下界面,然后复制你的APPID,悄悄的保存起来,不要给别人看到😄。

    2.3 开发工具

    下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html微信小程序自带开发者工具,集开发、预览、调试、发布 于一身的 完整环境。但是由于编码的体验不算好,因此 建议使用 VsCode + 微信小程序编辑工具 来实现编码, VsCode负责敲代码, 微信编辑工具负责预览

    3. 创建微信小程序

    3.1 打开微信开发者工具

    注意 第一次登录的时候 需要扫码登录

    3.2 新建小程序项目

    3.3 填写项目信息

    3.4 . 成功

    4. 微信开发者工具介绍

    详细的使用,可以查看官网:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

    5. 小程序结构目录

    小程序框架的目标是通过尽可能简单、有效的方式让开发者可以在微信中开发具有原生APP的体验的服务。小程序框架提供了自己的视图层描述语言 WXML 和 WXSS ,以及 JavaScript ,并在视图层与逻辑层间提供 了数据传输和事件系统,让开发者能够专注于数据与逻辑。

    5.1 小程序文件结构和传统web对比

    5.2 基本的项目目录

    6. 小程序配置文件

    一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和页面自己的 page.json注意:配置文件中不能出现注释

    6.1 全局配置 app.json

    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界眠表现、网络超时时间、底 部 tab 等。普通快速启动项⽬⾥边的 app.json 配置 pages 字段用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序 页面定义在哪个目录。window 字段定义小程序所有页面的顶部背景颜色,文字颜色定义等。完整的配置信息请参考 app.json配置tabbar

    6.2 页面配置 page.json

    这里的 page.json 其实用来表页面目录下的 page.json 这类和小程序页面相关的配置。开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等。页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。 属性名类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / whitenavigationBarTitleTextString导航栏标题⽂字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新。 详情 Page.onPullDownRefreshonReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px。 详情 Page.onReachBottomdisableScrollBooleanfalse设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项

    6.3 sitemap 配置-了解即可

    小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引。
    Processed: 0.022, SQL: 9