【微信小程序】开发入门篇(一)
前言 | ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ |
---|
【微信小程序】开发入门篇(一)
- 一、小程序简介
- (1)小程序与普通网页开发的区别
- 二、第一个小程序
- (1)注册小程序开发帐号
- 1.1 点击注册按钮
- 1.2 选择注册账号的类型
- 1.3 填写账号信息 → 邮箱激活→ 信息登记
- 1.4 获取小程序的 AppID
- (2)安装开发者工具
- 2.1 了解微信开发者工具
- 2.2 下载安装微信开发者工具
- (3)创建小程序项目
- 3.1 点击“加号”按钮 → 填写项目信息 → 项目创建完成
- 3.2 主界面的 5 个组成部分
- 三、小程序代码的构成
- (1)项目结构
- 1.1 了解项目的基本组成结构
- 1.2 小程序页面的组成部分
- (2)JSON 配置文件
- 2.1 JSON 配置文件的作用
- 2.2 app.json 文件
- 2.3 project.config.json 文件
- 2.4 sitemap.json 文件
- 2.5 页面的 .json 配置文件
- 2.6 新建小程序页面
- 2.7 修改项目首页
- (3)WXML 模板
- 3.1 什么是 WXML
- 3.2 WXML 和 HTML 的区别
- (4)WXSS 样式
- 4.1 什么是 WXSS
- 4.2 WXSS 和 CSS 的区别
- (5)JS 逻辑交互
- 5.1 小程序中的 .js 文件
- 5.2 小程序中 .js 文件的分类
- 四、总结
一、小程序简介
(1)小程序与普通网页开发的区别
二、第一个小程序
(1)注册小程序开发帐号
1.1 点击注册按钮
使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的“立即注册”即可进入到小程序开发账号的注册流程;
1.2 选择注册账号的类型
1.3 填写账号信息 → 邮箱激活→ 信息登记
1.4 获取小程序的 AppID
(2)安装开发者工具
2.1 了解微信开发者工具
微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:
- 快速创建小程序项目
- 代码的查看和编辑
- 对小程序功能进行调试
- 小程序的预览和发布
2.2 下载安装微信开发者工具
推荐下载和安装最新的稳定版(Stable Build)的微信开发者工具,下载页面的链接如下:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
(3)创建小程序项目
3.1 点击“加号”按钮 → 填写项目信息 → 项目创建完成
3.2 主界面的 5 个组成部分
三、小程序代码的构成
(1)项目结构
1.1 了解项目的基本组成结构
1.2 小程序页面的组成部分
小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,如图所示:
(2)JSON 配置文件
2.1 JSON 配置文件的作用
1️⃣ JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。
2️⃣ 小程序项目中有 4 种 json 配置文件,分别是:
- 项目根目录中的
app.json
配置文件; - 项目根目录中的
project.config.json
配置文件; - 项目根目录中的
sitemap.json
配置文件; 每个页面文件夹中的 .json 配置文件
;
2.2 app.json 文件
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等 。Demo 项目里边的 app.json 配置内容如下:
2.3 project.config.json 文件
project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
setting
中保存了编译相关的配置;projectname
中保存的是项目名称;appid
中保存的是小程序的账号ID;
2.4 sitemap.json 文件
1️⃣ 微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引。
2️⃣ 当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。
3️⃣
【微信小程序】开发入门篇(一)相关推荐
- 微信小程序开发入门篇
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的& ...
- 微信小程序开发入门篇(二)
✍.目录 配套视频教程:B站直达 微信小程序
- 微信小程序开发入门篇(一)
✍.目录 配套视频教程:B站直达 微信小程序
- 小程序onload_微信小程序开发入门之共享账本(十四)
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
- 从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门 主讲人介绍 沁修,葡萄藤技术总监 项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结 直播录屏版 https://v.qq.com/x/page/n ...
- 微信小程序开发入门(连载)—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号 在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
- 微信小程序开发入门(连载)—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具 前往 开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
- 微信小程序开发入门(连载)—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作 登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
- 微信小程序教程入门篇
微信小程序教程入门篇: 微信小程序怎么做?做一个微信小程序要多少钱呢? 作为Z时代,Y时代的我们,做一个微信小程序难道还要去看书学代码吗? 不存在的各位. 现在制作一个微信小程序,只需要动动鼠标键盘, ...
- 微信小程序开发入门(连载)—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
最新文章
- mysql 最小时间 最大时间_leetcode539_go_最小时间差
- 训练、标注成本节省90%!华为云自动化AI开发平台ModelArts 3.0发布,从训练数据到模型落地一站式打通...
- OVS 各功能调用过程(三十一)
- 根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面
- 【javascript基础】8、闭包
- 带参数二维码如何跟踪用户来自哪个推广人员?
- boost::geometry::detail::copy_segments的用法测试程序
- avg最多用多少列 mysql_使用MySQL中的AVG函数求平均值的教程
- IE和Chrome都将支持asm.js
- 计算机设备安装属于劳务吗,​安装服务费属于劳务费吗
- SVN安装-配置-使用及myeclipse的插件安装(图文)
- HDU 6096 树套树
- 一步步打造一个移动端手势库
- 1004. 成绩排名 (20)
- 十三、直接、寄存器间接寻址、寄存器相对寻址、基址变址寻址、相对基址变址寻址
- 19间断点的判别与分类
- Hbase数据管理工具
- 手机更换证件照背景色只需1分钟,别去打印店花冤枉钱了
- 使用Quagga测试Neutron BGP动态路由(by quqi99)
- 2:STM32CubeMX配置STM32F103C8T6驱动-SPI驱动