【微信小程序-0基础入门】项目发布完整流程

简介: 🍓安装开发者工具🍒小程序项目发布流程🍍小程序代码的构成-项目结构🧀1. 了解项目的基本组成结构🥞2. 小程序页面的组成部分🍑小程序代码的构成 - JSON 配置文件🍰1. JSON 配置文件的作用🍔2. app.json 文件🍅3. project.config.json 文件

🍓安装开发者工具


微信开发者工具 是官方推荐使用的小程序开发工具,它提供的主要功能如下:


① 快速创建小程序项目


② 代码的查看和编辑


③ 对小程序功能进行调试


④ 小程序的预览和发布


推荐下载最新的稳定版:


稳定版 Stable Build 更新日志 | 微信开放文档 (qq.com)


根据自己情况下载对应版本。


🍒小程序项目发布流程


这里只是演示小程序如何发布上线,所以没有编写代码。


1.点击加号



 


2.这里我们缺少APPID,我们登录 微信公众平台

3. 把APPID复制,然后粘贴进去,如下图所示勾选,然后确定






4. 接着,在刚刚的网站中,找到设置



5. 把下面的基本信息填写完毕



6.点击上传




7.更新类型随便选,版本号随便填,然后点击上传





8.打开官方网站,选择版本管理,然后提交审核,审核成功就能使用了


🍍小程序代码的构成-项目结构


平时我们练习时,选择不使用云服务。



然后点击测试号,并按下图这这样设置,然后点击确定


🧀1. 了解项目的基本组成结构


① pages 用来存放所有小程序的页面


② utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)


③ app.js 小程序项目的入口文件


④ app.json 小程序项目的全局配置文件


⑤ app.wxss 小程序项目的全局样式文件


⑥ project.config.json 项目的配置文件


⑦ sitemap.json 用来配置小程序及其页面是否允许被微信索引


🥞2. 小程序页面的组成部分


小程序官方建议把所有小程序的页面,都存放在 pages 目录 中,以 单独的文件夹 存在,如图所示:



其中,每个页面 由 4 个基本文件 组成,它们分别是:


① .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等)


② .json 文件(当前页面的配置文件,配置窗口的外观、表现等)


③ .wxml 文件(页面的模板结构文件)


④ .wxss 文件(当前页面的样式表文件)

🍑小程序代码的构成 - JSON 配置文件


🍰1. JSON 配置文件的作用


JSON 是一种数据格式 ,在实际开发中,JSON 总是以 配置文件 的形式出现。小程序项目中也不例外:通过不同


的 .json 配置文件,可以对小程序项目进行不同级别的配置。


小程序项目中有 4 种 json 配置文件,分别是:


① 项目根目录中的 app.json 配置文件


② 项目根目录中的 project.config.json 配置文件


③ 项目根目录中的 sitemap.json 配置文件


④ 每个页面文件夹中的 .json 配置文件


🍔2. app.json 文件



{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

app.json 是当前小程序的 全局配置 ,包括了小程序的 所有页面路径 、 窗口外观、界面表现 、 底部 tab 等。


Demo 项目里边的 app.json 配置内容如下:


简单了解下这 4 个配置项的作用:


① pages :用来记录当前小程序所有页面的路径


② window :全局定义小程序所有页面的背景色、文字颜色等


③ style :全局定义小程序组件所使用的样式版本


④ sitemapLocation:用来指明 sitemap.json 的位置


🍅3. project.config.json 文件


{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true
  },
  "compileType": "miniprogram",
  "libVersion": "2.24.4",
  "appid": "wx0da4d1971201a67b",
  "projectname": "miniprogram-4",
  "debugOptions": {
    "hidedInDevtools": []
  },
  "scripts": {},
  "staticServerOptions": {
    "baseURL": "",
    "servePath": ""
  },
  "isGameTourist": false,
  "condition": {
    "search": {
      "list": []
    },
    "conversation": {
      "list": []
    },
    "game": {
      "list": []
    },
    "plugin": {
      "list": []
    },
    "gamePlugin": {
      "list": []
    },
    "miniprogram": {
      "list": []
    }
  }
}


相关文章
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
46 1
|
14天前
|
人工智能 弹性计算 搜索推荐
打造个性化的微信公众号AI小助手:从人设到工作流程
在数字化时代,一个有个性且功能强大的AI小助手能显著提升用户体验。本文档指导如何在微信公众号上设置AI小助手“小智”,涵盖其人设、功能规划及工作流程设计,旨在打造一个既智能又具吸引力的AI伙伴。
|
6天前
|
小程序 前端开发 算法
|
11天前
|
Java API 开发者
Java如何实现企业微信审批流程
大家好,我是V哥。本文分享如何在企业微信中实现审批流程,通过调用企业微信的开放API完成。主要内容包括获取Access Token、创建审批模板、发起审批流程和查询审批结果。提供了一个Java示例代码,帮助开发者快速上手。希望对你有帮助,关注V哥爱编程,编码路上同行。
|
21天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
146 3
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
37 1
|
27天前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
1月前
|
小程序
微信小程序的注册流程
微信小程序的注册流程
64 0
|
28天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
40 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目