微信小程序入门---超详细教程

news2024/11/26 14:30:53

一,小程序入门

1.1 什么是小程序?

  1. 2017年度百度百科十大热词之一

  2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )

  3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验

  4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线

1.2 小程序可以干什么?

  1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用

  2. 通过扫一扫或者在微信搜索即可下载

  3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选

  4. 连接线上线下

  5. 开发门槛低, 成本低

二,安装小程序

2.1 申请帐号

官网下载微信小程序====》》微信公众平台

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号

注意在注册微信小程序的时候,该微信要绑定银行卡....会有提示的

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。
 

登录 小程序后台 ,我们可以在菜单 “开发”-“开发管理” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)

有了小程序帐号之后,我们需要一个工具来开发小程序

2.1 安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 

根据自己的需求下载相对应的版本,下载完毕之后,在下载目录下双击启动

启动之后并是安装,在安装期间自定义一个非中文文件夹,将小程序安装到此文件夹中

安装完毕之后,桌面会出现一个小图标(看下图)

双击打开,左上角会出现一个二维码,用刚刚注册的微信小程序的账户扫描登陆,要不然后续会出现问题

 三、创建第一个微信小程序

扫描登陆进来以后,点击左边的大加号即可创建小程序项目

选择该小程序项目的存储路径,将注册的小程序ApplD复制过来粘贴即可。后面的选择根据自己的需求来即可

这里微信小程序开发之所以成本低,还有一个原因是它把模板都给我们提供了,我们只需要提供数据即可完成一个零基础的手机端电商项目

 至此,我们的第一个微信小程序就做好了!!

四、微信小程序目录结构

pages目录:这个目录下放的其实就是一个个的微信端的页面了其中的index文件夹、logs文件夹其实都是单独的页面

再以index文件夹举例说——下属4个不同后缀文件:

(1)js:就是页面内的js文件,页面中的变量、监听事件全都在这里;

(2)json:页面的配置文件,其实就类似后端的配置文件,就看成 properties或者xml就好

(3)wxml:页面的结构文件,查看可以发现就是各种标签组成的结构块;

(4)wxss:页面的样式文件,看着里面都是选择器 

2、utils目录:这里面存的都是一些公用的js,就当作web后端项目的工具类就好啦,提供公共方法减少冗余和维护难度的;

3、app.js文件:整个微信小程序相关的全局js,这里有监听整个小程序的生命周期函数和全局变量;

4、app.json文件:是对整个小程序的静态全局配置,我们可以在这个文件中配置小程序是由哪些页面组成(路由),配置小程序的窗口背景色、配置导航条样式,配置默认标题,可以配置整个项目的样式,超时时间,加载的插件等等;(注意该文件不可添加任何注释);

5、app.wxss文件:整个小程序的样式文件,我个人认为这个文件就是设置整个项目的css文件。针对每个页面的css文件的内容不同,加载到对应页面的css样式时,当前页面的wxss文件会覆盖app.wxss文件(估计跟普通的css样式的覆盖规则类似)。

6、project.config.json文件: 这个其实是每个开发者工具生成的项目都有的,但和项目内容实际没有特别大关联,主要是记录相关工具的配置的,在工具上做的任何配置都会写入到这个文件,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

7、sitemap.json文件: 这个可以配置是否允许被微信索引,具体看微信官方文档-sitemap 配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1092772.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

好的摄影师都会iPhone 8和iOS 11的这三项功能

众所周知,苹果的手机像素一直处于智能手机摄影的前沿,在即将到来的九月,苹果公司准备证明他拥有最好的相机技术。 虽然我们还不知道iPhone 8摄像头的具体细节,如几百万像素、光学变焦是多少,但我们确实知道苹果正在给i…

2023年全球团队协作工具排名推荐,这6款值得关注!

随着远程工作变得越来越普遍,团队协作工具在今天的工作场所变得越来越重要。然而,找到合适的协作工具来满足团队的需求可能是一个挑战。有这么多可用的选项,很难决定哪一个对您的团队最有效。 在本文中,我们将研究团队协作工具的不…

小程序的入门

目录 小程序的简介 好处 安装及使用 小程序的入门案列 小程序的简介 微信小程序是一种轻量级的应用程序,可以在微信平台上运行。它们具有快速、便捷和低成本等特点。通过微信小程序,用户可以在微信内直接使用各种功能,而无需下载和安装额外…

如何降低海康、大华等网络摄像头调用的高延迟问题(一):海康威视网络摄像头的python sdk使用(opencv读取sdk流)

目录 1.python sdk使用 1.海康SDK下载 2.opencv读取sdk流 先说效果,我是用的AI推理的实时流,延迟从高达7秒降到小于1秒 如果觉得这个延迟还不能接受,下一章,给大家介绍点上不得台面的小方法 SDK(Software Developme…

“小程序:改变电商行业的新趋势“

目录 引言1. 小程序的简介1.1 什么是小程序?1.2 小程序的优势 2. 小程序之电商演示1.注册微信小程序2.安装开发工具3.创建项目 3. 小程序之入门案例总结 引言 随着移动互联网的迅猛发展,小程序作为一种全新的应用形态,正在逐渐改变着传统电商…

springboot 志同道合交友网站演示

springboot 志同道合交友网站演示 liu1113625581

SpringBoot面试题2:SpringBoot与SpringCloud 区别?SpringBoot和Spring、SpringMVC的区别

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:SpringBoot与SpringCloud 区别? Spring Boot 和 Spring Cloud 是 Spring 生态系统中的两个关键组件,它们有以下区别: 定位:Spring Boot 用于简…

<三>Qt斗地主游戏开发:主界面初始化显示

1. 主界面效果 效果关键点: 1)拖动标题栏可实现主界面拖动 2)logo图标名称及主界面背景 3)最小化及关闭 2.思路分析 1)背景图片及logo图标的设定比较简单,通过stylesheet即可实现。通过QWidget的拖动即可实…

Jboss反序列化漏洞

run.bat运行jboss 看下server.xml 端口设置的多少 打开jboss 用jboss反序列工具进行扫描 执行命令,因为存在jboss存在漏洞,所以执行命令得到结果 找一下jboss的目录 dir /s c:\*.jsp 先选一个jboss目录上传试一下 把斜杠改成反斜杠 给这个目录上传一个脚…

01背包问题 : 二维dp数组 + 图文

其实01背包问题,我之前跟着代码随想录的Carl学过,今天我看到另外一种定义dp数组的方式,我觉得思路也不错,所以我又来写一篇,大家再看此篇之后也可以看我的往期文章,非常感谢您的阅读:解决0-1背包…

「网络编程」网络层协议_ IP协议学习_及深入理解

「前言」文章内容是网络层的IP协议讲解。 「归属专栏」网络编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、IP协议简介二、IP协议报头三、IP网段划分(子网划分)四、特殊的IP地址五、IP地址的数量限制六、私有IP地址和公网IP地址七、路由八、分…

Unity实现摄像机向屏幕中间发射射线射击物体

1.创建一个准星放在屏幕中间 外部找个PNG透明图,拖到Unity文件夹,右上角改成精灵sprite2d 2.添加到UI画布 3.写脚本 首先,我们需要引入一些 "工具",就像我们在玩游戏时要先下载游戏客户端一样。这里的 "工具&quo…

【Python】Python语言基础(中)

第十章 Python的数据类型 基本数据类型 数字 整数 整数就是整数 浮点数 在编程中,小数都称之为浮点数 浮点数的精度问题 print(0.1 0.2) --------------- 0.30000000000000004 ​​1.可以通过round()函数来控制小数点后位数 round(a b),则表示…

华为云云耀云服务器L实例评测|华为云耀云服务器L实例启动宠物预约项目(九)

十、修改配置文件,启动宠物预约项目: 上面步骤进行了程序的安装,接下来就需要对相关程序的配置进行修改,如修改PHP-FPM的运行方式,增加nginx的配置文件,修改Laravel的配置文件。 1. 修改PHP-FPM的配置&…

【LeetCode: 136. 只出现一次的数字 | 位运算 - 异或】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

git强制删除本地分支 git branch -D

git强制删除本地分支 git branch -D git删除本地分支_zhangphil的博客-CSDN博客git branch -d <分支名>可以通过: git branch 查看所有本地分支及其名字&#xff0c;然后删除特定分支。https://blog.csdn.net/zhangphil/article/details/82255002 使用git branch -d删除…

网络工程师知识点3

41、各个路由协议&#xff0c;在华为设备中的优先级&#xff1f; 直连路由 0 OSPF 10 静态 60 42、OSPF&#xff1a;开放式最短路径优先路由协议&#xff0c;使用SPF算法发现和计算路由 OSPF的优点&#xff1a; 1、收敛速度快&#xff0c;无路由自环&#xff0c;适用于大型网络…

Arduino驱动BNO055 10轴绝对定向传感器(惯性测量传感器篇)

目录 1、传感器特性 2、控制器和传感器连线图 3、驱动程序 BNO055是实现智能9轴绝对定向的新型传感器IC,它将整个传感器系统级封装在一起,集成了三轴14位加速度计,三轴16位陀螺仪,三轴地磁传感器和一个自带算法处理的32位微控制器。

Qtcreator console 中文 乱码

开发环境&#xff1a;windows11 x64 位&#xff1b;Qt Creator 11.0.3&#xff1b;Based on Qt 6.4.1 (MSVC 2019, x86_64) 报错内容如图所示&#xff1a; 解决方法如下&#xff1a;

关于EEGLAB安装时报错“未定义函数或者变量‘EEGLAB’”

按照其他博主写的&#xff0c;下载EEGLAB&#xff08;最新版&#xff09;&#xff0c;然后解压&#xff0c;打开matlab&#xff08;2019a&#xff09;导入路径&#xff0c;在前述步骤都正确的情况下&#xff0c;命令行输入eeglab&#xff0c;matlab提示"未定义函数或者变量…