《微信小程序-基础篇》初识微信小程序
大家好，好久不见了，前段时间各种原因分享不稳定，后面一段时间内参与了主站的原力计划，请麻烦各位支持一下，万分感谢～
本系列将从零开始介绍微信小程序的开发，介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站（PS：最近热衷于原神，做的真好），谢谢大家支持～
《微信小程序-基础篇》初识微信小程序
- 前言
- 阅读对象及难度
- 聊一聊小程序
- 开发工具
- 安装与配置
- 创建新项目
- 开发工具说明
- 界面说明
- 常用工具说明
- 顶部工具栏
- 预览区
- 其他
- 页面构成
- 小结
前言
微信小程序从问世后虽然已历时几年，但其热度相信各位有目共睹，如何衡量其在前端开发领域的重要性，最简单、最粗暴的方式就是翻看各大招聘网站的招聘信息，个人大约翻阅了50条左右的招聘，一半以上的职位 都是要求开发者 具有开发微信小程序的能力，或者微信小程序的开发能力属于 加分项；
另外，对我个人而言，我在2020年的时候上传过一个微信小商场的demo，到目前为止，那篇文章到目前为止依然是我热度最高的一篇…（好惭愧…）
为此，这次借着原力计划这个活动重新拾起微信小程序，能进行系统性的复习，当然，学习的过程必须记录下来分享给更多的人，期望能帮助更多对小程序有兴趣的朋友，感谢～
阅读对象及难度
本文难度属于：初级，对尚未接触到小程序的朋友通过本文可以大致了解到 微信小程序是什么，如何开发一个微信小程序以及微信小程序的一些基本设置；
聊一聊小程序
微信公众号的出现直接将微信的格局从一个聊天工具提升为一个平台级工具，其价值的提升就不再多说，但是微信公众号有一个硬伤，就是用户体验，用户体验终究依托的是一个web内核，几近网页的操作体验相比APP终究是差了一截，具可查到的资料，从2016年起，微信内部就已开始内测一种名为《小程序》的应用，它依托于微信，可以提供接近原生APP的体验和内容呈现，它的出现主要为了就是为了方便运营主体更好的提供服务，不管是体验上的，还是内容上的；
当然，微信小程序归根结底，其依旧寄托于浏览器，区别在于微信经过一系列的封装与优化，使得小程序的体验相较于网页得到了质的提升（本来想找一个微信小程序放在这里的，想了想好像没必要，22年了谁还没用过几个小程序啊，况且后面我们自己也会搞一个小程序）；
开发工具
自然，小程序的开发有专属于小程序的开发工具，它有微信官方提供，名字叫做：微信开发者工具（下载地址：微信开发者工具），对其版本，官方提供了几个版本，主要有：稳定版（推荐），预发布版，开发版；
仅从名字看，我们就可以大致知道其左右，如果不是非常想要体验其最新功能，我个人建议，选择稳定版即可，预发布版与开发版，不是太推荐，另外稳定版随着版本的更新，是否有必要一直追随官方的脚步一直更新稳定版至最新，我个人认为其实没有必要，我个人的升级原则是看版本更新能否给开发带来更多的便利，如果能可以更新，如果不能，那么可更新可不更新；
肯定有小伙伴会问，是不是只能使用官方提供的微信开发者工具进行开发，答案是否定的，其实包括vscode，HBuilderX在内的非常多的工具都可以进行开发，工具仅仅是工具，只是说官方提供的这个工具它能更友好的协助开发者进行调试与预览；
安装与配置
下载完知道版本之后，直接安装即可，我个人使用的是mac版本，因此以下的演示均基于稳定版Stavle Build（1.0.5.2204250）的macOS x64版本
创建新项目
安装完成后，首次登录需要登录微信，没关系，直接扫就行
进入主页选择小程序，新建一个空白项目
输入小程序项目信息，即可新建项目成功，注意的是，其中有一项AppID，这个代表了小程序的唯一标识，如果说创建的这个项目是正式的，以后需要发布的，那么可以去注册一个，如果是为了学习之类的，那么可以使用测试号
开发工具说明
界面说明
当新建完项目后，会出现以下界面，大致可以分成几个区域，先直接看图吧
- 预览区：左侧红色部分，这个区域主要的作用是可以实时看到我们编写代码的效果，比如把代码中的Hello World改成yzq，那么在预览区会实时的看到变化，除此之外，在预览区的上方还有一个工具栏，它可以提供包括 调整屏幕大小（切换机型） 在内的一些功能，我们知道小程序主要是给移动端使用的，那么机型的切换展示对应效果就至关重要；
- 目录区：整个项目的目录都在此区域，包括对文件的新增，删除，调整等多个功能；
- 开发区：这个区域相信不用多说了吧，我们开发人员编写代码的地方就在这里；
- 调试区：这个区域也很熟悉，等同于Chorme的调试区域，在这里可以做一些针对代码的调试，包括打印，断点，查看缓存等等；
常用工具说明
顶部工具栏
顶部工具栏的操作和vscode非常接近，其实也没有什么好说明的，值得一提的是，这里有一个设置，下面可以设置开发者工具的主题颜色或者自定义外观等等，当然，也包括快捷键，编辑器的一些设置，这些设置可以根据自己的习惯进行；
当然，以上这些都不足以使得这个单独拎出来讲，单独拎出来是因为这里有一个非常重要设置：项目设置，
这里有一项非常重要的叫做“不校验合法域名，web-view（业务域名），TLS版本以及HTTPS证书”，这一项建议勾上，小程序上线之后对应的API后台是必须要https协议的，但是开发阶段，我们的后台环境大概率是没有https的，因此这一项非常必要勾上；
预览区
左侧是第一个，机型切换功能，正如上面所说，小程序主要面向的是移动端，移动端不可避免的一个问题就是多机型的适配，因此在这里就可以看到不同机型时显示的不同界面；
右侧第二个也是常用功能，它提供了包括设备处于不同网络，4G、3G、2G，甚至无网络时的效果；
其他
至于调试区，代码区，目录区其实也没有什么特别需要注意的地方，调试区其实就是内置了一个chrome浏览器，这一点对前端开发来说非常友好；
页面构成
其实在之前的一篇文章里已经详细描述过小程序的页面构成了（可以看这里：《彻底入门微信小程序》），经过这两年的发展，虽然小程序有了非常多的变化但基本规则依旧是没有变的，这里既然是重拾，那么还是要重新说一下相同点和不同点；
先来看一下存放页面的位置吧，依旧是pages文件夹，当然并不是页面一定要放在pages里，只是说约定俗成的开发时讲页面放在了pages下
和以前相比，页面的组成依旧是四部分：JSON文件，JS/TS文件，样式文件，wxml文件这四块，换句话说，当我们打开了一个微信小程序，看到了一个页面，那么这个页面很可能就是这4个组成的；
- .js： 该页面的页面逻辑，这个文件里的逻辑只针对当前页面，不会影响到别的页面；
- .json：该文件的页面配置文件，影响范围也仅限当前页面；
- .wxml：该页面的布局文件，相当于html文件，描述的是页面的结构；
- .wxss：该页面的样式表，相当于css，描述的是当前页面的样式；
和以前不同的是，现在的小程序是 支持css与处理器以及TypeScript 了，在新创建小程序是，选择模板时可以选择sass或者less作为css的样式处理器，也可以选择TypeScript来代替JavaScript；
以下代码来自于微信小程序模版中的utils文件，可以看出还是比较友好的
export const formatTime = (date: Date) => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return ([year, month, day].map(formatNumber).join('/') +' ' +[hour, minute, second].map(formatNumber).join(':'))
}const formatNumber = (n: number) => {const s = n.toString()return s[1] ? s : '0' + s
}小结
本文主要初步介绍了微信小程序的起源和微信开发者工具，我们知道微信小程序是为了与公众号互补而产生的，它极大的优化了公众号在体验，内容呈现上不足的部分，而我们如果要开发一个微信小程序则需要借助官方提供的微信开发者工具；
《微信小程序-基础篇》初识微信小程序相关推荐
- 微信小程序基础之在微信上显示和体验小程序？
随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...
- 考研打卡app小程序第二篇（微信用户授权）
安卓和小程序体验 小程序体验 安卓版本体验 安卓体验 一.小程序结构 目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的 ...
- 小程序基础篇-视图与逻辑
本次学习目标: 实现页面间的导航跳转 实现下拉刷新 实现上拉加载更多 知道小程序常用的生命周期函数 1.页面导航 页面导航指的是页面之前相互的跳转 浏览器之间的页面导航有两种:<a>;lo ...
- Flask web开发实战之基础篇 初识Flask
基础篇 第一章 初识Flask 前言 1. 初识Flask 1.1.搭建开发环境 1.1.1 pipenv工作流 1.1.2 创建虚拟环境 1.1.3 管理环境依赖 1.1.4 安装Flask 1.2 ...
- ESP8266 Non-OS SDK 开发之旅 基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
- 使用Xamarin开发手机聊天程序 -- 基础篇（大量图文讲解 step by step，附源码下载）
如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微 ...
- 微信小程序基础篇-模板与配置
本篇学习目标 使用WXML渲染模板语法渲染页面结构 使用WXSS样式美化结构 使用app.json对项目进行全局配置 使用page.json对页面进行个性化配置 如何发起网络请求 1.WXML模板语法 ...
- 学习笔记(02):XCX微信小程序基础教程-XCX微信小程序基础教程-1：小程序简介和注册1 ... ......
立即学习:https://edu.csdn.net/course/play/10043/213774?utm_source=blogtoedu weixing
- Linux|centos7下部署安装alertmanager并实现邮箱和微信告警（基础篇---二）
前言: 一个成熟的符合一般人预想的资源监控平台应该是能够多维度的展示各种各样的数据,比如,服务器的内存使用率,磁盘io状态,磁盘使用率,CPU的负载状态,某个服务的状态(比如,MySQL数据库的使用情 ...
最新文章
- AI 时代，还不了解大数据？
- 【C语言】06-基本数据类型
- vue-router动态路由示例
- FTP协议常用COMMAND和状态码
- 【JavaScript代码】使用JavaScript实现简单的区块链（签名+工作量证明机制）
- get pid and kill
- Deploy your UI5 application into SAP Cloud Platform and launch as a tile
- 图片热区map-area
- Eclipse Java EE的tomcat使用小结
- android中搭建NDK环境及使用JNI技术
- bootstraptable 加载完成回调函数_牛皮了！头一次见有大佬把「JavaScript中的回调函数」详解得如此清晰明了...
- 订单发货的存储过程mysql_一个订单相关的存储过程（MySQL）
- c语言数组指针题库,C语言 数组指针练习题.doc
- 人性的弱点(经典语录)
- 前端工程师实习面试总结
- 聚划算火拼如何参团 聚划算火拼效果怎么样
- 增长：IT运维发展趋势报告
- 用Python给图片加水印
- ERROR: After October 2020 you may experience errors when ins
- Gradle接入checkstyle代码风格检查插件