【微信小程序开发】史上最详细的入门教学

目录

一.关于小程序的了解

二.注册微信小程序 

1. 访问微信公众平台开放平台(微信公众平台开放平台)

2.使用微信号登录或注册一个新的微信公众号账号

3. 在开放平台首页,点击右上角的 "立即注册" 按钮,进入小程序注册页面​编辑

4.完成测试号的申请(测试号)

三.安装微信开发者工具

1.下载微信开发者工具

2.执行安装包

3.登录微信开发者工具

 四.第一个小程序的创建

五.目录结构介绍 


一.关于小程序的了解

        微信小程序是一种基于微信平台的应用程序,它可以在微信内部直接运行,而无需下载和安装。它能够在提供类似原生应用的用户体验的同时,占用较少的存储空间。

微信小程序可以用于各种用途,包括但不限于社交、新闻、购物、娱乐和工具等。用户可以通过搜索或扫描二维码的方式快速访问小程序,并且无需离开微信即可完成各种功能。

        使用微信小程序有以下几个优势:

  • 1. 便捷性:小程序无需下载和安装,用户可以直接在微信中使用,节省了存储空间。
  • 2. 一体化体验:用户可以在微信内部无缝切换使用小程序,不需要来回切换应用,提供了更流畅的用户体验。
  • 3. 轻量化开发:相对于开发原生应用或者移动网页,开发微信小程序可以使用小程序专属的开发工具,通过简单的开发流程和提供的组件库,能够更高效地进行开发。
  • 4. 更广阔的用户基础:微信拥有庞大的用户基础,通过微信平台发布的小程序可以直接触达亿万用户,提供了更大的曝光和推广机会。

综上所述,微信小程序的便捷性、一体化体验、轻量化开发和广阔的用户基础是使用微信小程序的主要优势

二.注册微信小程序 

  • 1. 访问微信公众平台开放平台(微信公众平台开放平台)

  • 2.使用微信号登录或注册一个新的微信公众号账号

  • 3. 在开放平台首页,点击右上角的 "立即注册" 按钮,进入小程序注册页面【微信小程序开发】史上最详细的入门教学_第1张图片

  • 【微信小程序开发】史上最详细的入门教学_第2张图片【微信小程序开发】史上最详细的入门教学_第3张图片【微信小程序开发】史上最详细的入门教学_第4张图片【微信小程序开发】史上最详细的入门教学_第5张图片
  • 4.完成测试号的申请(测试号)

测试号会相对的简洁简单

【微信小程序开发】史上最详细的入门教学_第6张图片

三.安装微信开发者工具

1.下载微信开发者工具

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

【微信小程序开发】史上最详细的入门教学_第7张图片

2.执行安装包

下载后双击执行文件,按照向导执行完成即可

【微信小程序开发】史上最详细的入门教学_第8张图片

3.登录微信开发者工具

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

【微信小程序开发】史上最详细的入门教学_第9张图片

 四.第一个小程序的创建

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

【微信小程序开发】史上最详细的入门教学_第10张图片【微信小程序开发】史上最详细的入门教学_第11张图片

五.目录结构介绍 

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


【微信小程序开发】史上最详细的入门教学_第12张图片

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

好啦,今天的分享就到这了,希望能够帮到你呢! 

你可能感兴趣的:(小程序开发,微信小程序,小程序)