小程序入门——详细教程

                                                   🎬 艳艳耶✌️:个人主页

                                                  🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》

                                                   ⛺️ 生活的理想,为了不断更新自己 ! 
 

1.微信小程序 入门

1.1什么是小程序?

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

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

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

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

1.2小程序可以干什么?

  • 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
  • 通过扫一扫或者在微信搜索即可下载
  • 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
  • 连接线上线下
  • 开发门槛低, 成本低

前期准备:

微信开发者工具下载地址:

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

微信小程序开发文档:

微信开放文档微信开发者平台文档icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/index.html

2.注册微信小程序

开发小程序的第一步,需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,选择 “小程序” 即可。

接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。

激活邮箱之后,选择主体类型为 “个人类型”,并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或修改。
 

微信小程序的正式号和测试号有以下几点区别:

  • 使用限制:测试号只能用于在开发测试阶段使用,而正式号则可以发布上线供用户使用。
  • 功能限制:测试号的功能相对比较受限,如不支持微信支付、部分接口调用等功能,而正式号可以尽可能地满足开发者的需求。
  • 可操作性差异:测试号的操作相对更容易,无需经过严格的审核流程和申请手续,而正式号需要经过微信官方的审核才能上线使用。
  • 用户量限制:测试号的用户数有一定的限制,而正式号没有限制,可以随时增加用户量。

通过测试号可以帮助开发者快速验证小程序的基本功能,调试问题,优化用户体验。当开发完成后可以申请正式号,并经过微信官方的审核上线,让更多的用户使用和体验小程序提供的服务。

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

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

一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败,也可以从微信公众平台上手动登录。填写小程序的基本信息,包括名称、图标、描述等。提交成功之后,再添加开发者。开发者默认为管理员,我们也可以从这里新增绑定开发者,这是管理员才有权限的操作。

然后在左侧导航栏点击 “设置”,找到开发设置,获得小程序的 AppID。

3.安装微信开发者工具

3.1下载微信开发者工具

可以在微信开放文档中选择对应版本,然后下载对应的安装包

3.2登录微信开发者工具

首次启动开发者工具,则需要微信账号扫码登录

登录微信开发者工具

4.第一个小程序的创建

新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序

5.目录结构介绍 

  1. js文件:页面脚本文件,存放页面数据、事件处理函数等。——处理用户操作
  • app.js文件:整个项目的入口文件,通过调用App()函数启动项目。
  • 页面.js文件:页面入口文件,调用Page()函数,创建并运行页面。
  • 普通.js文件:普通功能模块文件,用来封装公共的函数或属性供页面使用
  1. json文件:当前页面配置文件,配置窗口的外观、表现等。
  2. wxml文件:页面的模板结构文件。(WXML模板类网页HTML)
  3. wxss文件:当前页面的样式表文件。(WXSS:一套样式语言,用于描述WXML局部或全局的组件样式,类网页CSS)

整个项目的目录结构分析

  • pages:【文件夹】存放所有小程序的页面
  • index文件—首页文件
  • logs文件—日志文件
  • utils:【文件夹】用来存放工具性质模块[如:格式化时间的自定义模块]
  • app.js:项目入口文件
  • app.json:项目全局配置文件 
  • pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]
  • window——全局定义所有页面样式
  • style——全局定义小程序组件所使用的样本
  • sitemapLocation——指明sitemap.json的位置

                                                   今日分享到此结束! 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序的console中出现:。。。不在以下 request 合法域名列表中,请参考文档:。。。的报错解决

报错效果: 其实这个报错不代表自己的代码有问题 但是本强迫症研究了一下,按照以下方法关掉就不会显示这个报错了。 点微信开发者工具中的右上角的详情。点本地设置。勾选不校验。。。HTTPS证书。 即可关闭该报错:

java springboot VUE粮食经销系统开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot VUE 粮食经销系统是一套完善的完整信息管理类型系统,结合springboot框架和VUE完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发) ,系统具有完整的源代码和数…

多域名证书

多域名证书是一种可以保护多个不同域名的SSL证书,最多可保护250个域名。与单域名证书相比,多域名证书具有更多的优势,比如可以更好地管理多个域名,减少部署证书的次数,提高网站安全性等。多域名证书有三种验证方式可以…

mac电脑安装雷蛇管理软件,实现调整鼠标dpi,移动速度,灯光等

雷蛇官网只给了win版本驱动 mac版本驱动到这里下载: GitHub - 1kc/razer-macos: Color effects manager for Razer devices for macOS. Supports High Sierra (10.13) to Monterey (12.0). Made by the community, based on openrazer. 安装后会显示开发者不明,请丢弃到垃圾桶.…

单片机综合小项目

一、单片机做项目常识 1.行业常识 2.方案选型 3.此项目定位和思路 二、单片机的小项目介绍 1.项目名称:基于51单片机的温度报警器 (1)主控:stc51; (2)编程语言:C语言 (…

00TD时尚儿童穿搭,这件小熊毛衣太好看了吧

寒冷的秋冬季怎么少的了毛衣呢 软糯亲肤又时尚百搭的款谁不爱 除了纯色还有条纹设计 可爱小熊图案可爱又吸睛 经典时尚的款怎么穿都好看哦!

css 特别样式记录

一、 这段代码神奇的地方在于, 本来容器的宽度只有1200px,如果不给img赋予宽度100%,那么图片 会超出盒子,如果给了img赋予了宽度100%,多个图片会根据自己图片大小的比例,去分完那1200px,如图二。…

Netty P1 NIO 基础,网络编程

Netty P1 NIO 基础,网络编程 教程地址:https://www.bilibili.com/video/BV1py4y1E7oA https://nyimac.gitee.io/2021/04/25/Netty%E5%9F%BA%E7%A1%80/ 1. 三大组件 1.1 Channel & Buffer Channel 类似 Stream,它是读写数据的双向通道…

华为9.20笔试 复现

第一题 丢失报文的位置 思路&#xff1a;从数组最小索引开始遍历 #include <iostream> #include <vector> using namespace std; // 求最小索引值 int getMinIdx(vector<int> &arr) {int minidx 0;for (int i 0; i < arr.size(); i){if (arr[i] …

【k8s总结】

资源下载&#xff1a;http://www.ziyuanwang.online/912.html Kubernetes(K8s) 一、Openstack&VM 1、认识虚拟化 1.1、什么是虚拟化 在计算机中&#xff0c;虚拟化&#xff08;英语&#xff1a;Virtualization&#xff09;是一种资源管理技术&#xff0c;是将计算机的…

力扣每日一题43:字符串相乘

题目描述&#xff1a; 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2"…

多模态及图像安全的探索与思考

前言 第六届中国模式识别与计算机视觉大会&#xff08;The 6th Chinese Conference on Pattern Recognition and Computer Vision, PRCV 2023&#xff09;已于近期在厦门成功举办。通过参加本次会议&#xff0c;使我有机会接触到许多来自国内外的模式识别和计算机视觉领域的研究…

【云计算网络安全】DDoS 攻击类型:什么是 ACK 洪水 DDoS 攻击

文章目录 一、什么是 ACK 洪水 DDoS 攻击&#xff1f;二、什么是数据包&#xff1f;三、什么是 ACK 数据包&#xff1f;四、ACK 洪水攻击如何工作&#xff1f;五、SYN ACK 洪水攻击如何工作&#xff1f;六、文末送书《AWD特训营》内容简介读者对象 一、什么是 ACK 洪水 DDoS 攻…

【MyBatis系列】- 什么是MyBatis

【MyBatis系列】- 什么是MyBatis 文章目录 【MyBatis系列】- 什么是MyBatis一、学习MyBatis知识必备1.1 学习环境准备1.2 学习前掌握知识二、什么是MyBatis三、持久层是什么3.1 为什么需要持久化服务3.2 持久层四、Mybatis的作用五、MyBatis的优点六、参考文档一、学习MyBatis知…

JavaWeb-10月16笔记

JavaWeb 现实生活中的互联网项目都是javaWeb项目, 包含网络, 多线程, 展示: HTML等其他的前端技术, 界面窗体展示(Swing包,AWT包 窗体), C#,… ** JAVAWeb架构: ** - B/S: 浏览器/服务器 优点: 以浏览器作为客户端, 使用这个软件, 用户不需要下载客户端, 程序更新,不需要…

2000年至2017年LandScan全球人口分布数据(1KM分辨率)

简介&#xff1a; LandScan全球人口分布数据来自于East View Cartographic&#xff0c;由美国能源部橡树岭国家实验室(ORNL)开发。LandScan运用GIS和遥感等创新方法&#xff0c;是全球人口数据发布的社会标准&#xff0c;是全球最为准确、可靠&#xff0c;基于地理位置的&…

【Overload游戏引擎细节分析】视图投影矩阵计算与摄像机

本文只罗列公式&#xff0c;不做具体的推导。 OpenGL本身没有摄像机(Camera)的概念&#xff0c;但我们为了产品上的需求与编程上的方便&#xff0c;一般会抽象一个摄像机组件。摄像机类似于人眼&#xff0c;可以建立一个本地坐标系。相机的位置是坐标原点&#xff0c;摄像机的朝…

AMEYA360-罗姆ROHM马来西亚工厂新厂房竣工

全球知名半导体制造商罗姆为了加强模拟IC的产能&#xff0c;在其马来西亚制造子公司ROHM-Wako Electronics (Malaysia) Sdn. Bhd.(以下简称“RWEM”)投建了新厂房&#xff0c;近日新厂房已经竣工&#xff0c;并举行了竣工仪式。 RWEM此前主要生产二极管和LED等小信号产品&#…

自己写spring boot starter问题总结

1. Unable to find main class 创建spring boot项目写自己的starterxi写完之后使用install出现Unable to find main class&#xff0c;这是因为spring boot打包需要一个启动类&#xff0c;按照以下写法就没事 <plugins><plugin><groupId>org.springframewo…

二、K8S之Pods

Pod 一、概念 K8S作为一个容器编排管理工具&#xff0c;它可以自动化容器部署、容器扩展、容器负载均衡等任务&#xff0c;并提供容器的自愈能力等功能。在Kubernetes中&#xff0c;Pod是最基本的调度单元&#xff0c;它是一组共享存储和网络资源的容器集合&#xff0c;通常是…