【微信小程序入门到精通】— AppID和个性配置你学会了么？
目录
- 前言
- 一、AppID 的获取
- 二、初始化配置
- 2.1 新建项目并初始化
- 2.2 代码初始化
- 2.2.1 app.json
- 2.2.2 project.config.json
- 2.2.3 sitemap.json
- 总结
前言
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！
微信小程序官方文档可以点击下方链接查询：
- 小程序组件参考文档
- 小程序API参考文档
- 小程序服务端API参考文档
如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！
一、AppID 的获取
我们所有的开发首先都需要知道我们小程序的AppID，那么我们如何获取
进入我们的小程序官网，登录账号后进去主界面
在主界面菜单栏中点击 “开发”中的开发管理，在开发管理中点击开发设置
在开发者设置页面中复制我们的AppID即可
二、初始化配置
我们的微信开发者工具的使用前，需要先了解一下他的基础组成，以及进行初始化配置，接下来我们将一步一步进行学习。
2.1 新建项目并初始化
点击 “加号”,新建一个小程序
进行小程序的配置（AppID配置，选择基础模板JS）
设置成功后得到如下界面
预览功能（左侧界面查看、扫码手机端查看）
2.2 代码初始化
在们的代码界面，我们可以看到每一块的文件下面有四种类型的子文件，分别是 .js / .json / .wxss / .wxml
其中在utils文件内是我们整个程序设置的地方
2.2.1 app.json
app.json主要配置四个模块：
- pages：记录小程序所有的页面的地址
- window：定义小程序所有的背景色和文字颜色等等
- style：定义组件使用版本
- sitemapLocation：指名sitmap.json的地址
代码如下：
{"pages":["pages/index/index","pages/logs/logs","pages/xdl/xdl"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}1. pages内部配置了三个地址，也就是说明小程序内有三个页面（默认的是没有第三行的地址，这是我之前测试用的）
2. window内部布置了背景色比如第一行的backgroundTextStyle就是设置了背景文本风格
3. style就是设置版本为最新级
4. sitemapLocation告知了sitemap.json的位置，此处就是用的相对地址，说明我们sitemap.json的位置与app.json同级，且后缀为sitemap.json
2.2.2 project.config.json
project.config.json内部存放的是用户对微信小程序开发工具个性化配置,接下来我们逐一学习
首先先看一下如下代码：
{"description": "项目配置文件","packOptions": {"ignore": [],"include": []},"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,"checkSiteMap": true,"showES6CompileOption": false,"minifyWXML": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""}},"compileType": "miniprogram","libVersion": "2.19.4","appid": "wxe38261f5028b588c","projectname": "miniprogram-92","condition": {},"editorSetting": {"tabIndent": "insertSpaces","tabSize": 2}
}
- description就是描述当前文件
- setting是设置当前个性化配置
- appid就是小程序ID
- projectname就是设置当前项目名字
- editorSetting是编辑器的设置
有关setting的设置非常的多，接下来我们来对应了解一下
首先打开本地设置，如下图所示
对应每一个按钮，当我们按下后，左边的代码就会发生改变，比如我们将第一个选项 将JS编译成ESS取消勾选
“es6”: true,这一初始代码就会变成 “es6”: false,
我们代码中的每一条都对应这个选板内，我们可以在本地设置内勾选，也可以在代码内编译上
其余设置大家可以自行尝试
2.2.3 sitemap.json
该文件内用于配置小程序是否可以被微信索引，类似于网页的SEO
{"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html","rules": [{"action": "allow","page": "*"}]
}
其中allow表示可以被索引，如果不希望微信索引我们的小程序，那么设置成disallow即可
总结
至此我们初始配置就讲解完毕了，后续我们就详细学习各种组件以及进行小程序的构建！
✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下
【微信小程序入门到精通】— AppID和个性配置你学会了么？相关推荐
- 【微信小程序入门到精通】—小程序实战构建售货平台首页
目录 前言 一.步骤阐述 二.新建项目并梳理结构 三.配置导航栏 四.tabBar 实现 五.轮播图实现 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
- 【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）
目录 前言 一.网络数据请求的限制要求 1.1 配置合法域名 1.2 在微信小程序开发者工具里面查询是否成功 二.网络数据请求 2.1 GET 2.2 POST 三.网络数据请求实操 3.1 发起 G ...
- 【微信小程序入门到精通】— 事件绑定的详细解读
目录 前言 一.事件绑定导论 二.常用事件 三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法 总结 前言 对于目前形式,微信小程序是一 ...
- 【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）
目录 前言 一.tabBar 介绍 二.实操(创建 tabBar ) 2.1 基本配置 2.2 详细配置 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
- 【微信小程序入门到精通】— 条件渲染实现方式
目录 前言 一.wx:if 渲染方式 1.1 wx:if 介绍 1.2 wx:if 实例介绍 二.结合 block 的整体条件渲染 2.1 block 组件 2.1 block + wx:if 结合实 ...
- 微信小程序入门到精通
常见问题 1.rpx:小程序的尺寸单位,规定屏幕为750rpx,可适配不同分辨率的屏幕 2.本地资源无法通过wxss获取 RE:background-image:可以使用网络图片,或者base64,或 ...
- 【微信小程序入门到精通】— 项目准备
目录 前言 一.在app.json中添加页面 二.功能基本介绍 2.1 .js(脚本逻辑文件) 2.2 .json(全局配置文件) 2.3 .wxml(微信小程序结构文件) 2.4 .wxss(组件显 ...
- 【微信小程序入门到精通】— 微信小程序开发工具的安装
目录 前言 一.注册小程序账号 二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具 总结 前言 微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...
- 【微信小程序入门到精通】— window 导航栏配置
目录 前言 一.全局配置的常用配置项 二 .window 导航栏 2.1 navigationBarTitleText 配置项 2.2 下拉刷新的配置 总结 前言 对于目前形式,微信小程序是一个热门, ...
- 【微信小程序入门到精通】— 小程序的 API 到底是个啥
目录 前言 一.API 导论 二.事件监听 API 三.同步 API 四.异步 API 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设 ...
最新文章
- 招聘|腾讯机器人实验室语义视觉方向（实习+社招）
- Struts2 关于返回type=chain的用法.
- python学习音频-Python学习笔记--音频处理
- 盘点区块链的2018：技术与工具演进篇
- 以后的note的方法
- 【图文详解】第一个Java程序HelloWorld详解，写Java程序需要注意什么
- MySQL + springboot修改时区的方法小结
- 远程图片保存到服务器 php,保存远程图片到本地服务器几种方法[php,asp]网
- mysql 主主模式优缺点_mysql主主同步模式
- Java编程之反射中的注解详解
- LeetCode 2017. 网格游戏（前缀和）
- Day04 dom详解及js事件
- 什么是.NET应用程序域
- 软件项目实施进度计划表
- linux c 读写 ini 配置文件
- 仿真软件计算机配置,电脑配置关于ANSYS等仿真软件，AMDcpu可选择吗？
- MySQL 数据库简介
- VLC接收RTP的H264流串流成OGGT向HTTP发送，可以直接用HTML5播放
- 2021年福建省安全员B证（项目负责人）考试试题及福建省安全员B证（项目负责人）作业模拟考试
- win10打开程序不弹出窗口，只在任务栏显示
热门文章