【微信小程序】初识微信小程序

这篇具有很好参考价值的文章主要介绍了【微信小程序】初识微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者简介:一名C站萌新,前来进行小程序的前进之路 博主主页:大熊李子的主页🐻
【微信小程序】初识微信小程序

1.1 什么是微信小程序

微信小程序 是一种可以通过扫码或搜索即可进入使用的应用,减少了 下载安装 的环节,实现用户对于应用“触手可及、用完即走”的理想需求。在微信公众平台,小程序是与服务号、订阅号、企业微信并行的体系点开微信“发现-小程序”栏 ,你就能看到 近期使用过 的 小程序 ;或者下拉微信聊天页面,你也能看到自己用过的小程序。如果你没有用过任何小程序,那么可以扫码进入小程序页面,或者点击好友分享的小程序卡片进入小程序。

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

1. 运行环境不同

网页 运行在 浏览器环境 中
小程序 运行在 微信环境 中

2. API 不同

由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 API。
但是,小程序中可以调用微信环境提供的各种 API,
例如:地理,定位,扫码支付

3. 开发模式不同

网页 的开发模式:浏览器 + 代码编辑器
小程序 有自己的一套标准开发模式
1.申请小程序开发账号
2.安装小程序开发者工具
3.创建和配置小程序项目

2.小程序开发准备

2.1 注册小程序开发帐号

1. 点击注册按钮

点击注册微信小程序

2.2.安装开发者工具

1. 了解微信开发者工具

微信开发者工具 是官方推荐使用的 小程序开发工具 ,它提供的主要功能如下:

①快速 创建 小程序项目

②代码的 查看 和 编辑

③ 对小程序 功能 进行 调试

④小程序的 预览 和 发布

2.下载

微信开发者工具

3.安装

【微信小程序】初识微信小程序

4. 扫码登录

打开自己的微信然后扫码登录

5. 设置外观和代理

【微信小程序】初识微信小程序

2.3 创建小程序项目

【微信小程序】初识微信小程序

1.点击“加号”按钮
2. 按要求填写新建项目需求

一定要记得选择javaScript模板

3. 项目创建完成
4. 在模拟器上查看项目效果

【微信小程序】初识微信小程序

5. 在真机上预览项目效果

【微信小程序】初识微信小程序

6. 主界面的 5 个组成部分

3. 小程序代码的构成

3.1 项目结构

1.了解项目的基本组成结构
1. pages 用来 存放所有小程序 的页面
2. utils 用来存放 工具性质 的模块(例如:格式化时间的自定义模块)
3. app.js 小程序项目的 入口文件
4. app.json 小程序项目的 全局配置文件
5. app.wxss 小程序项目的 全局样式文件
6. project.config.json 项目的 配置文件
7. sitemap.json 用来 配置小程序及其页面是否允许被微信索引
2. 小程序页面的组成部分
.
├── app.js     # 小程序的逻辑文件
├── app.json   # 小程序的配置文件
├── app.wxss   # 全局公共样式文件
├── pages      # 存放小程序的各个页面
│   ├── index  # index页面
│   │   ├── index.js     # 页面逻辑
│   │   ├── index.wxml   # 页面结构
│   │   └── index.wxss   # 页面样式表
│   └── logs   # logs页面
│       ├── logs.js      # 页面逻辑
│       ├── logs.json    # 页面配置
│       ├── logs.wxml    # 页面结构
│       └── logs.wxss    # 页面样式表
├── project.config.json
└── utils
    └── util.js

小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在

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

3.2 JSON 配置文件

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

小程序项目中有 4 种 json 配置文件,分别是

1. 项目根目录中的 app.json 配置文件
2. 项目根目录中的 project.config.json 配置文件
3. 项目根目录中的 sitemap.json 配置文件
4. 每个页面文件夹中的 .json 配置文件
2.app.json 文件

app.json 是当前小程序的 全局配置 ,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab
等。Demo 项目里边的 app.json 配置内容如下:

4个配置项的作用
1. pages:用来记录当前小程序所有页面的路径
2. window:全局定义小程序所有页面的背景色、文字颜色等
3. style:全局定义小程序组件所使用的样式版本
4. sitemapLocation:用来指明 sitemap.json 的位置
3. project.config.json 文件

project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

1. setting 中保存了编译相关的配置
2. projectname 中保存的是项目名称
3. appid 中保存的是小程序的账号 ID
4. sitemap.json 文件

微信现已开放小程序内 搜索 ,效果类似于 PC 网页的 SEO。 sitemap.json 文件用来 配置小程序页面 是否允许微信索引。当开发者允许微信索引时,微信会通过 爬虫 的形式,为小程序的页面内容 建立索引 。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
注意 sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件
project.config.json 的 setting 中配置字段 checkSiteMap 为 false

5. 页面的 .json 配置文件

小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖
app.json 的 window 中相同的配置项。

6. 新建小程序页面

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

7. 修改项目首页

只需要调整 app.json -> pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第
一位的页面,当作项目首页进行渲染
【微信小程序】初识微信小程序文章来源地址https://www.toymoban.com/news/detail-419983.html

到了这里,关于【微信小程序】初识微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了部分常用配置选项的 app.json : 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配

    2024年02月01日
    浏览(46)
  • 微信小程序 -- 微信小程序发送红包

    参考链接:微信小程序 – 微信小程序发送红包 组织参数 点击查看微信的文档 发送示例 拼接参数(ASCII码从小到大排序(字典序)) 加密参数 将参数实体转换成xml格式 最后就是发送请求 相信发送post请求大家都不陌生了吧 最后就是对微信返回的参数进行解析,建议遇到问

    2024年02月10日
    浏览(42)
  • 微信小程序-微信小程序登录流程(一)

    微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 冷启动: 小程序首次打开或销毁后再次被打开,此时小程序需要重新加载启动,即冷启动。会检查小程序是否

    2024年02月11日
    浏览(42)
  • 【微信小程序】实现微信小程序登录(附源码)后端,微信小程序获取手机号

    登录简介 第一步:获取token 第二步:通过token拿用户信息 第三步:调用接口获取手机号 HttpClientUtil: WeChatUtil: controller层: service层: serviceImpl层: 登录简介        新版本微信小程序登录 是前端获取用户信息,不再是后端获取信息进行保存。所以后端要做的主要流程就是

    2024年04月23日
    浏览(63)
  • 微信小程序之微信登陆-——-微信小程序教程系列

    }) 黄色标注的部分就是登陆部分 下面详细介绍微信小程序的微信登陆 第一步:获取登陆态code 微信登陆部分,首先需要使用微信小程序的api—— wx.login(OBJECT)来获取登录态 这个登陆态的作用是为了获取用户的openid(用户的唯一标识) 相关链接:https://mp.weixin.qq.com/debug/wxadoc

    2024年04月23日
    浏览(54)
  • 亲测微信小程序备案流程,微信小程序如何备案,微信小程序备案所需准备资料

    微信小程序为什么要备案,微信官方给出如下说明: 1、若微信小程序未上架,自2023年9月1日起,微信小程序须完成备案后才可上架; 2、若微信小程序已上架,请于2024年3月31日前完成备案,逾期未完成备案,平台将按照备案相关规定于2024年4月1日起进行清退处理。 备案系统

    2024年02月07日
    浏览(57)
  • 微信小程序之初步了解微信小程序

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年01月16日
    浏览(40)
  • 微信小程序----微信小程序浏览pdf文件

    说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件。只需在js操作即可。

    2024年02月11日
    浏览(37)
  • 微信小程序项目实战 微信小程序的事件对象

    目录 小程序前后端交互 自定义组件的使用 语法说明 properties 定义 案例  微信小程序的事件对象 e.target和e.currentTarget  微信小程序的事件传参 传参方式一: data-key=\\\'value\\\' 传参方式二: id=\\\'value\\\' scroll-view 使用  scroll-view 中使用flex布局 scroll-into-view 下拉刷新 上拉加载 微信小程

    2024年02月09日
    浏览(128)
  • 微信小程序Loading加载+提示框(微信小程序)

    1.Loading加载界面 2.提示框 1.Loading加载界面----方法1 应用场景:显示loading - 你要做的事 - 隐藏loading,缓解用户焦虑 2.Loading加载界面----方法2 应用场景:单纯显示loading界面,自定义延时时间,比较鸡肋 3.提示框 按钮样式喜欢的可以搬走!🤭(●’◡’●)`

    2024年02月12日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包