微信小程序入门教程 --(保姆级)

6 篇文章 3 订阅
订阅专栏

一、小程序注册

1、首先,到小程序官网注册自己的小程序账号,以下附有地址和教程:
小程序官网
进入这个地址之后,会看到这样的页面,点击立即注册按钮
在这里插入图片描述
2、在接下来的页面,选择小程序
在这里插入图片描述
3、然后根据提示完成三个注册步骤,(1).填写正确的邮箱和密码格式;(2).进行邮箱激活,在自己的邮箱里会收到一条验证信息,点击激活即可;(3).填写信息,进行信息登记,完成三个步骤即注册完成。
在这里插入图片描述
4、注册完成后,返回首页进行登录,用自己的微信扫描首页的二维码即可登录。
在这里插入图片描述
5、登录成功之后,按下面步骤找到自己的微信小程序 Id 账号。
在这里插入图片描述

二、下载微信开发者工具

1、下载

微信开发者工具就是开发微信小程序的一个编译工具,点击以下官网地址进行下载和安装。
微信开发者工具下载(稳定版)

2、安装

进入链接之后,选择适合自己系统的进行下载,下载完成之后,双击安装包进行安装,步骤如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、完成

点击完成之后会弹出一个二维码,用自己的微信扫描二维码,然后再手机上确认,就会弹出这样一个页面,接下来就可以新建第一个项目了。
在这里插入图片描述

三、新建项目

1、如果微信开发者工具下载完成之后没有弹出以上新建页面,就双击打开微信开发者工具,图标如下所示:
在这里插入图片描述
2、可以在桌面或者某一个文件夹里面创建一个空的文件夹,名字任意英文字母组成,例如:
在这里插入图片描述
3、点击+号,新建第一个项目
在这里插入图片描述
4、选择自己创建的文件夹目录,AppID 是刚才注册小程序的 ID 账号,复制粘贴即可,然后后端服务选择 不适用云服务,模板可以选择JavaScript基础模板,(如果你会 TypeScript ,也可以选择TypeScript 基础模板),然后点击确定即可创建第一个项目。
在这里插入图片描述
5、创建完成之后,进入到项目页面,如下所示:
在这里插入图片描述

四、项目目录介绍

1、工具介绍

在这里插入图片描述

2、项目目录介绍

在这里插入图片描述

  1. pages 用来存放所有小程序的页面
  2. utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
  3. .eslintrc.js 检测代码样式格式的文件
  4. app.js 小程序项目的入口文件
  5. app.json 小程序项目的全局配置文件
  6. app.wxss 小程序项目的全局样式文件
  7. project.config.json 项目的配置文件
  8. project.private.config.json 项目私有配置文件
  9. sitemap.json 用来配置小程序以及页面是否允许被微信索引
3、创建新页面

在 app.json 文件中,pages 目录下,添加 home 页面,写在最上面就会显示在模拟器中,保存之后会自动生成home页面。不要忘了加英文逗号!!!
在这里插入图片描述

4、书写简单样式

以下是简单的页面编写示范:接下来就可书写代码了,下面是随意创建了一个页面,演示了一些简单的代码,更多基础内容详解可查看首页其他文章。
在这里插入图片描述

五、微信小程序开发文档

微信小程序开发文档
上面这个☝是微信小程序开发文档的地址链接, 有各种不懂的问题都可以去查阅文档,有微信小程序开发步骤,各种 API 和组件等等。
在这里插入图片描述
这些是小程序入门教程,更多基础内容,可点击我的头像去个人中心查看,后续会持续更新~

希望各位不要吝啬,给个小赞赞~

【ESP 保姆教程】 疯狂传感器篇 —— 案例:ESP8266 + DHT11 + OLED + 巴法云平台 + 微信小程序(曲线图)
单片机菜鸟哥的博客
04-19 5153
学习内容: - 读取 DHT11 温湿度数据 - 串口输出 温湿度数据- OLED液晶屏显示温湿度数据 - 温湿度数据上传到巴法云平台 - 微信小程序展示最近温湿度曲线图
【ESP 保姆教程】 疯狂传感器篇 —— 案例:ESP32 + DHT11 + OLED + 巴法云平台 + 微信小程序(曲线图)
单片机菜鸟哥的博客
04-12 1096
基于【ESP 保姆教程】 疯狂传感器篇 —— 案例:ESP8266 + DHT11 + OLED + 巴法云平台 + 微信小程序(曲线图)去适配了ESP32版本。所以很多技术细节直接看该篇即可。
微信小程序开发零基础入门】——微信小程序入门
leah126的博客
07-10 2326
2017 年度百度百科十大热词之一微信小程序,简称小程序,英文名 Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )小程序刚发布的时候要求压缩包的体积不能大于 1M,,否则无法通过,在 2017 年 4 月做 了改进,由原来的 1M 提升到 2M;2017 年 1 月 9 日 0 点,万众瞩目的微信第一批小程序正式低调上线。
零基础入门微信小程序(一)
weixin_47081743的博客
07-11 609
微信小程序 1. 小程序简介 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 1.2 小程序与普通网页开发的区别 ​小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性。 ​网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统
微信小程序开发1.简易教程
vincenteL的博客
06-04 4631
微信小程序 简易教程 一、基础: 第一章 起步 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。 跟随这个教程,开始你的小程序之旅吧! 申请账号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 ...
微信小程序新手入门教程
L1ke_one的博客
04-17 4511
一、准备工作 登录微信小程序官网mp.wx.qq.com注册账号 下载微信开发者工具 创建小程序项目文件夹,并创建小程序模板 选择JS模板 二、对小程序页面进行路由配置 在pages文件夹中创建一个新的文件夹 再在新创建的文件夹中新建page js 文件:页面逻辑 wxml 文件:页面结构 json 文件,页面配置 wxss 文件,页面样式 打开小程序中的app.json文件 在pages下添加新建的页面路径 讲新建的页面放在第一个 此时左边模拟器显示效果如下即
微信小程序入门教程
BarryYang0930的博客
12-30 925
1.介绍微信小程序 依赖环境(宿主环境): 手机微信 2.开发前的准备 注册开发者账号–>AppID 安装微信开发者工具 3.一个项目的组成部分 pages 文件夹,在这个文件夹之下存放小程序中所有的页面,建议一个页面用一个文件夹进行维护 app.js 小程序的入口文件 app.json 项目配置文件 pages: 进行页面的注册, 如何创建一个新的页面? 如何把页面变为小程序的首页? window: 对所有的页面进行窗口样式的配置 tabBar: 进行tabBar页面的配置 app.wxss:全局
微信小程序开发入门教程
weixin_34319817的博客
05-04 249
在这篇微信小程序开发教程中,我们将向你介绍快速试用和体验微信小程序开发工具和官方示例Demo。 本系列教程将引导你完成如下任务: 下载微信web开发者工具和小程序官方Demo。 添加小程序示例Demo到项目 体验小程序常用组件及接口   第一部分 下载开发者工具和官方Demo   微信小程序开发者工具 为了帮助开发者简单和高效地开发微信小程序,微信官方推出了全新的微信小程...
搭建小程序的保姆详细教程
03-29
搭建小程序的保姆详细教程是面向初学者设计的,旨在帮助他们轻松地构建自己的小程序网站商城。本教程将深入探讨整个过程,从基础概念到实际操作,确保学习者能够逐步掌握这一技能。以下是对相关知识点的详细说明:...
uni-app从入门到精通-10311421.pdf
05-28
开发者通过编写Vue.js代码,uni-app将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。uni-app继承自Vue.js,提供了完整的Vue.js开发体验。uni-app组件规范和扩展api与微信小程序基本...
0基础也能开发小程序,保姆实战教程,一学就会
低代码布道师的博客
06-01 1123
2017年微信推出小程序以来,创造了一种新颖的开发模式,近几年前端开发的技能项里就明确要求会小程序开发。但是利用微信开发者工具开发微信小程序,门槛颇高。 既要求有前端开发技能,还得学习小程序的开发语言,如wxml、wxs等,框架、组件、api一套学习下来就感觉门槛很高了。 为了降低学习和使用难度,今年一月份腾讯云适时的推出了一款低代码开发工具,微搭,主要就是解决快速开发的问题。依托于腾讯云底层的云开发技术,提供了一套在线的小程序开发工具,全程使用拖拽的形式进行开发,无需编码没有前端开发经验的人也可以使用。.
微信小程序入门
weixin_49555741的博客
01-06 2352
pages: 存放小程序页面utils:存放工具性质的模块(例如格式化时间的自定义模块)app.js: 入口文件app.json: 全局配置文件app.wxss: 全局样式文件project.config.json: 配置文件sitemap.json: 配置小程序以页面是否被微信索引宿主环境是指程序运行所必须的依赖环境例如Android系统和IOS系统是两个不同的宿主环境,安卓的微信是不能在IOS环境下运行的,安卓的宿主环境是Android,脱离了宿主环境的软件是没有意义的。
微信小程序从零开始开发步骤(一)搭建开发环境
祈澈菇凉
03-15 1万+
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了。 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: https://mp.weixin.qq.com/ 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。注册完成之后开始登录。 imag...
微信小程序开发教程--从零开始
热门推荐
gjy_it的博客
01-07 4万+
从零开始 微信小程序中就四种类型的文件
微信小程序入门
sinat_40697723的博客
08-11 935
一.微信开发者工具主要功能介绍 1.新版本的微信开发者工具会自动将修改后的页面显示出来,不需要我们执行编译,只需要ctrl+s保存即可。 2.控制台Sources下面的js文件中,带sm的是原始的js文件,不带sm的是执行编译过后的文件,所以我们在调试的时候应该在带有sm的js文件下调试。 3.控制台点击三个点那个按钮,有个open file,可以帮助我们快速找到所需文件。        ...
微信小程序轻松入门教程(一)
小王@Note的博客
08-01 3644
​ 之前发表了JavaScript小白入门笔记、HTML小白入门笔记、CSS小白入门笔记,其实都是为了这一个激动人心的时刻打下基础,从这篇开始我将正式入坑微信小程序开发,详细整理从入门到进阶的一系列教程,同时教程中也会附上实战项目的源码下载链接。 ​ 当然如果你还没有学过HTML、JavaScript、CSS,建议你先关注我的博客阅读或搜索我的ID号关注(ID:zdfsb 当然不要把关注重点放在我的ID号上,虽然我也很想改掉它????????),这能帮助你更快、更容易地掌握微信小程序的开发。那么话不多
onenet 微信小程序
最新发布
01-21
OneNet 微信小程序是由中国移动推出的一款用于物联网应用开发的工具。它基于微信小程序的开发框架,结合了中国移动的物联网平台 OneNet,提供了丰富的物联网功能和接口。 OneNet 微信小程序可以实现设备接入和控制、数据采集和展示、消息推送等一系列物联网应用的开发。与传统的物联网应用开发相比,OneNet 微信小程序具有以下几个优势: 首先,OneNet 微信小程序的开发门槛较低,使用的是微信小程序的开发框架,开发者可以使用熟悉的前端开发技术进行开发。同时,OneNet 提供了丰富的开发文档和示例,为开发者提供了便捷的开发环境。 其次,OneNet 微信小程序与微信生态系统的无缝对接,可以直接通过微信小程序实现设备的远程控制和数据采集。用户只需要在微信小程序中注册设备并进行绑定,即可通过手机随时随地对设备进行控制和监测。 再次,OneNet 微信小程序支持多种数据展示方式,包括图表、列表和地图等,用户可以根据实际需要选择最合适的展示形式。同时,OneNet 提供了数据分析和报表功能,可以对设备的历史数据进行分析和展示,帮助用户更好地了解设备的运行状态和趋势。 总而言之,OneNet 微信小程序是一款功能强大且易于开发的物联网应用开发工具,为开发者和用户提供了便捷的物联网应用开发和使用体验。
写文章

热门文章

  • 如何将本地代码上传到 gitee 20856
  • 前端JS格式化日期时间(超详细!!!) 14071
  • uniapp小程序 - 隐私协议保护指引接入教程 13091
  • 微信小程序--基础内容(详解)(一) 7745
  • 微信小程序入门教程 --(保姆级) 7569

分类专栏

  • uniapp 1篇
  • 微信小程序 6篇
  • Git 3篇
  • vue3 1篇

最新评论

  • uniapp-设置UrlSchemes从外部浏览器H5打开app

    海绵宝宝不喜欢侬: app内部不能使用web-view的方式打开h5,要用跳出外部浏览器的方式跳到h5,然后再从h5打开app

  • uniapp-设置UrlSchemes从外部浏览器H5打开app

    grtjh203: 你好 我就是这样操作的 H5也部署到了线上,app也配置了协议安装了自定义基座,但是点击跳转的时候跳转不了,这是为什么呢?

  • uniapp-设置UrlSchemes从外部浏览器H5打开app

    跟着我走吧: 您好 app是必须要上线 才可以跳转吗 按照您这边的截图设置好之后 打开h5页面 跳转没有反应

  • uniapp-设置UrlSchemes从外部浏览器H5打开app

    海绵宝宝不喜欢侬: 后面的地址填写你的页面路径,然后编辑器里面一定要重新打包

  • uniapp-设置UrlSchemes从外部浏览器H5打开app

    lch1912298318: 我按照您的方法试了一下没反应呢,是我配置的跳转地址有问题吗,请问一下怎么jjstest://后面的地址我该怎么填写呢

大家在看

  • 【成品论文】2024年华为杯研赛C题28页二等奖成品论文(后续会更新)

最新文章

  • uniapp-打包app-图标配置
  • uniapp-设置UrlSchemes从外部浏览器H5打开app
  • Git 命令大全-详细!(满足日常工作需求)
2024年3篇
2023年13篇
2022年5篇

目录

目录

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

天下网标王网站优化的过程概念如何做好一个网站的优化无锡做网站优化乐至网站排名优化费用茶山网站关键词优化哪家好网站排名优化网站优化是选择目录与子域名佛山网站优化公司开封seo网站优化哪家便宜永宁县网站seo优化排名网站结构页面布局代码标签优化沧州网站优化排名价格一比多网站怎么优化海城网站搜索引擎优化襄阳产品网站优化公司排名濮阳家居行业网站优化推广有哪些安庆企业网站排名优化哪家有名城中区网站seo优化排名益阳专业网站优化公司邯郸网站搜索优化公司孝感品牌网站优化怎么做网站产品优化必知易速达甘南网站优化公司双流区做优化网站seo优化最高效的网站英文网站优化公司铁岭网站优化联系电话濮阳家装行业网站优化推广技巧天津网站优化技术佛山优化网站价格香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

天下网标王 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化