微信小程序开发与应用 第一章 微信小程序的基本知识1

简介: 微信小程序开发与应用 第一章 微信小程序的基本知识1

前言


微信小程序,是小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。

我们通过微信开发者工具,我们能创建自己的小程序,当我们完成小程序开发者绑定、开发信息配置后,开发者即可下载开发者工具、参考开发文档进行小程序的开发和调试。提交审核和发布完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。


一、注册一个小程序账号


1、首先我们在微信公众号平台-小程序里面翻到最下面,这里我们点击前往注册即可,前往注册,输入绑定的邮箱以及密码等等。

1666889066152.jpg

2、完成注册后,重新进入微信公众平台,微信扫码或者使用账号登陆。


附网站链接:https://mp.weixin.qq.com/

1666889132739.jpg


3、在微信上提示登陆后,进入开发-开发管理中即可找到AppID,即小程序ID。

1666889143752.jpg

4、然后我们在微信公众平台寻找下载微信开发者工具,并选择下载稳定版。


附网站链接:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1666889163248.jpg


二、第一个微信小程序“Hello Wechat!”


(一)准备工作


1、打开微信开发者工具,提示用微信扫一扫登陆。

1666889190887.jpg

2、进入页面我们点击“+”,开始创建一个小程序。

1666889202396.jpg

3、此时会弹出小程序的项目名称以及目录,然后我们可以使用之前所创建的小程序ID或者使用测试号登陆,选择开发模式、后端服务以及语言后点击就绪。

1666889211313.jpg


(二)页面介绍


1、进入界面,我们看到左上方有四个矩形,分别是模拟器、编辑器、调试器以及可视化,前三个分别对应下面的手机页面、中间的编辑器以及下方的调试窗口。

1666889226850.jpg

2、另外我们要知道微信小程序页面是由四个文件组成的,即由.js、.json、.wxml、.wxss文件构成,其中

(1).js文件是页面逻辑文件,主要包含逻辑代码;

(2).json文件是页面配置文件,即每一个小程序页面都可以使用 .json 文件来对本页面的窗口表现进行配置;

(3).wxml文件是页面描述文件;

(4).wxss文件是样式表文件,用来渲染页面。

1666889285698.jpg


(三)代码编写及编译预览


1、我们点击index目录下的index.wxml,它会默认生成一些内容。

1666889300583.jpg

2、将无关紧要的删除后,我们开始编写一个微信小程序“Hello Wechat!”,输入view后回车,会自动产生一个< /view >,我们在view和< /view >之间输入Hello Wechat!,在点击上方的编译,即可看到左边模拟器显示我们刚刚输入的内容。

1666889313256.jpg

3、当然我们也可以通过编译旁边的预览,二维码预览或者自动预览即可在手机所登陆的微信号上展示。

1666889323321.jpg

1666889333173.jpg


结语


以上就是本次微信小程序开发的全部内容,感谢您的阅读和支持,若有表述或者代码中的不当之处,望指出!您的指出和建议能给作者带来很大的动力!!!


相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
783 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
794 1
|
2月前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
72 3
|
2月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
131 0
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
267 1
|
3月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
78 5
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1276 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
569 0
|
3月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
716 0
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
187 7