《从零到一：全面解析小程序开发实战指南》

《从零到一：全面解析小程序开发实战指南》小程序页面设计制作全解析：从0到1的实战指南#商城小程序#小程序商城#购物小程序那今天的话主要是给大家分享一下我自己的小程序开发的方法，我个人认为比较轻松也比较方便的方法。对开发小程序需要哪些基本的技能？那我个人的建议是啊，就是先学会前端三件套，HTML，CSS，js会开发网页之后再去开发小程序，可能会简单很多，如果学会Vue或者react开发框架，再去开发小程序，效率肯定是会比原生开发更高的。所以我个人更推荐的是就是走前端这个方向的同学，就是先把will或react学完，先会用框架开发网页，再去开发小程序，那你的这个学习的曲线会更平缓，那会更容易入门一些，因为小程序它的规则确实是会比网页开发要更多的啊。那我们一般比较主流的开发方式是有两种，一种是原生，那原生开发就是完全用某个平台小程序的开发语法，比如说微信的话，它就是什么WXM，但是对于我们大多数开发者，尤其是个人开发者来说，那这种方式它的这个开发效率就是不高的，所以不是很推荐大家用这种方式，那我们现在更多的是用这个小程序开发框架去开发，那比如说大家熟知的一些跨端开发框架，那什么叫跨端开发呢？就是说我们写一套代码，然后交给框架帮我们自动编译出，在各个平台上都能很丝滑、很正常运行的小程序，或者说其他的这种应用的形态。那比如说APP，那比如说H5、网页等等，就是我不用针对不同的平台，每个平台我都要单独写一个新的项目，跨端开发它的一个优点是方便，但是缺点是什么？比如说你为了性能想要去自己定制开发，或者要定制某些人家框架没有提供的功能，那这种情况下就麻烦一些了。我们开发小程序又分为前端还有后端，那刚刚讲的这些什么跨端开发原生语法，它更多的是在前端这个方向上，小程序的后端开发跟其他的网页端项目、客户端项目的后端开发都是类似的，所以说这里不打算过多的介绍，比如你用Java写，用go语言，那都是一模一样的啊。只不过可能小程序登录，你需要去单独开发一下小程序平台提供的第三方接口，那这个可能需要额外的学习，那当然了，这个微信官方，或者说一些小程序平台官方，它为了让你更快的开发这个小程序，可能提供了一些额外的方式。那比如说微信云开发，它就会帮你提供一套数据库文件存储、数据分析等等等等的环境。那这个云开发它能够帮助就是前端开发非常熟悉，但是后端不怎么了解的同学快速地把这个后端给搭起来，更新的开发方式就是叫低代码开发。那你可以用这种拖拉拽的方式，那比如说腾讯云提供了微搭，那这个是入门成本最低的，但是它的定制化的成本就反而变高了。你如果啥都不会，又想快速用小程序，那就买，那就只能买了。大家觉得小程序这个应用形态它有什么优点呢？基于微信的生态，它是易于传播和分享的。第二个就是它不用让用户下载APP，对吧？打开快速，这两个是我们做小程序可能最看重的一个点啊。那这里就说一下，我们公司自己也在做产品，那我们的代码小抄制的工具，它就是支持用小程序来快速分享的。我举个例子，这里分享我们就有微信小程序分享，大家手机扫码立刻就能够打开这个小程序去使用。在我们开始正式写代码之前，我们要先了解小程序的开发流程，那如果我们要开发微信小程序，就要学会阅读官方的文档，官方文档里面它有那个详细的指引，比如说你要先了解小程序的开发规则，对吧？要去安装开发工具，那怎么去运行？怎么去编译浏览？大家感兴趣可以自己阅读一下，点击这里安装开发者工具，点击进入下载页面，选择对应的操作系统版本，等待下载就好了。这个小程序开发界面分为三大部分，准确的说分为四大部分，第一大部分是一大堆的设置，然后第二大部分就是我们用来调试用的界面。第三部分就是这个编辑器，你可以在小程序里直接写代码。那第四个就是调试工具，就是一个网页项目的调试工具，可以看到网络请求，看到网页源码，看到控制台信息。就小程序的开发体验和网页开发基本是一致的，都具有在线热中心调试、版本兼容、打包上线等等的功能。小程序开发的痛点就是一些权限或者功能需必须要企业号，但是它并不影响你学习。今天主要是以前端为主，给大家分享怎么用Taro快速搭建小程序开发项目的模板。那Taro这是一个非常主流的小程序跨端开发框架，我们用什么框架开发？首先就是去网上搜教程，但是如果你比较有经验的话就不用搜教程了，直接去上手看它的官方文档，这个效率是更高的，点击快速开始就能看到它官方教你怎么样去把这个项目初始化好，你看Taro，它能够直接写一套代码转换到任意的平台，这就是为什么推荐用它嘛？那我们再往下好，它支持reactwill等等等等的框架。那如果你学过这些前端框架，你要去使用Taro开发小程序就非常非常的方便。我们注意3的文档啊。首先这个Taro项目它基于NODE，所以我们的系统里一定要有NODE的环境。首先我们要用NPM这样一个软件包管理器来安装一个这个Taro的项目创建工具，我们按Windows键加打开这个终端，然后粘贴这行命令执行，稍等它安装吧。诶，安装完成，我们按照官方文档的操作执行titleinit，随便起一个项目名称，但是一定要是英文的好初始化项目介绍随便写吧。选择框架react是否要用TS？要用是否要用CSS易处理器？那什么是CSS易处理器呢？就是说能够帮你提供一些原生CSS之外的更高级的语法，提高你写CSS的效率，然后选择编译工具，选最新的就好了，选择包管理，这里为了照顾入门的同学，选择NPM。然后再往下我们这里选择模板源，就选国内的比较快的，这个为我们提供了很多的模板，比如说默认模板，这个Redux状态管理模板使用某种组件库的模板，使用hooks的模板，那如果你使用微信云开发作为后端的话，选择这个模板我还是给大家演示比较通用的，我们就用这个基于TaroUI的模板，它会自动帮助我们整合一个组件库来选择它。虽然说什么安装依赖失败了，但是大家不要怕它帮我们安装依赖失败了，那我们就自己安装不就好了？打开自己的开发工具，我们打开myAPP，我们刚刚创建出来的项目，这里我们首先要安装依赖，我们进入到终端，输入人PMinstall就能安装依赖了。安装完依赖之后，我们要先验证一下通过Taro脚手架创建出来的这个项目代码能不能跑。我们进入package点json这种文件，找到这样两行命令，第一个命令是buildVapp，它的作用就是你在发布小程序的时候它能帮你打包，但如果你现在是本地开发阶段，对吧？你可能要不断地改代码，不断地去调试，那我推荐大家用第二个命令叫DEvAPP，那这里有一个watch监听的参数，它的作用就是你这边改完代码，然后在小程序开发工具里就能看到最新的效果了。那我们现在呢？因为属于一个开发阶段，对不对？那我们就运行这个低危vAPP的命令来运行。我们可以看到项目正常运行，就打开微信开发者工具，首先以游客模式登录，先最快地验证一下我们的项目能否正常运行，点击添加这里，我们就打开我们刚刚生成的这个项目的目录根目录，当然如果我们要正式去搞一个上线的小程序，你首先要在微信公众平台去注册小程序账号，然后根据平台给你分配的这个APPID把它填写进来。然后你才能够去启用像云开发这种功能，然后也才能够正式地发布上线，然后确定项目已经运行起来了，这说明胎肉脚手架为我们创建的项目是没有问题的。那接下来我们要做的就是试着去改一改代码，大家看TaroUI就是这样的一个组件库，是一个啥东西？想要去给界面添加一些好看的元素，你不需要自己去写每一行代码，你可以直接去用别人给你开发好的这种组件，你可能用这样一行代码就能够开发出这样一个很美观的样式。推荐选择一个和Taro官方框架兼容的组件库，要不然可能会出现跨端之后样式丢失的问题。那比如说TaroUI，那还有这个就是叫notUI，TaroUI是官方自家做的，所以是最推荐的，兼容性最好。怎么使用组件库呢？其实非常简单，其实如果说你不用TaroUI模板的话，你是需要自己去整合的，但是现在我们用了现成的模板，别人帮你整合好了，我们直接根据自己的需要去使用组件。那举个例子，我们就加一个按钮，那就先在文档里面搜按controlf，对吧？搜按钮搜到了，那我们点击这个按钮，然后再去看这个文档，看一下右边它有一个演示，对不对？我们从中找到自己最想要的按钮的样式，比如说这个主操作按钮，那我们就找就是和右边的样式最匹配的这段代码，比如说这个接下来就开始修改代码，首先这个src就是我们主要编写的代码。这里有一个叫APP点configt，点TS里就每当我们要创建一个新的页面，都要在配置式里去添加一个新的页面的路由这个Taro框架，它会根据你的这个页面的路由就想象成我们的网址，然后去找到配置色目录下对应的这个文件，比如说配置是index，index，它会去找配置indexindex，找到这里文件，再去加载到对应的页面，我们新增一个页面，我们就叫Pages，叫坤坤index，我们回到小程序，发现他报错了。大家遇到报错一定不要慌，一定要完整阅读这个报错信息。他说了我找不到这个页面对应的文件，对不对？那这里我们就创建一个文件，我们复制这里应代词目录创建，我们把名称改成坤坤，就和这个我们写的页面地址完全一致，来，我们可以通过调整这个地址的位置来决定进入小程序时首先打开哪个页面，那比如说我把这个坤index放最前面，诶，大家看是不是加载出来了？我们进入到这个index点TSX，这是react的语法啊。然后我们进入这个页面，我们粘贴张张复制的组件代码，这里我们把按钮文案改成叫基建按钮，我没有点什么重新编译重启之类的，对不对？你会发现这按钮是不是加上去了？那这个就是说明我们引用的组件库也生效了，那大家之后如果要开发页面，就按照我刚刚给大家分享的这个流程。那最后如果我们的小程序已经开发好了，我们要怎么做呢？这里首先我们要对它进行一个打包，进入这个patch质检Jason里，刚刚我们执行的是开发调试命令，现在我们要执行这个build命令，构建完成之后我们就会发现目录下多了一个dist，这个dist目录就是我们最终要发布到微信小程序平台的代码，进入到我们的微信小程序开发工具，在右上角有一个详情，这边有一个叫修改APPID，好，然后我们点上传，每次发版都要有一个版本号的，比如0.0.1，然后给一个备注，然后点上传好了代码就会上传上去了。上传成功之后，你就可以登录微信的小程序平台去设置发布版本，然后正式上线等等等等。大家如果遇到报错，可以多去微信开发者社区交流，那这是开发微信小程序的一个基本流程了。其实大家可能在开发过程中还会遇到很多的问题，那我这里就给大家抛砖引了玉，比如说我们前端可能是不是还要向后端发送请求？那大家以前是怎么去写这个发请求的代码的？是不是要引入一个请求库？比如说extras？但是微信小程序开发它和浏览器开发不太一样，它是不支持使用extras的，那这种情况下我们要怎么办？TIER官方也提供了这个请求的工具，可以多去读一读这个TIER官方文档，你需要什么就找什么。我举个例子，是不是要发请求，对吧？搜一下请求就能找到Taro是怎么发网络请求的？比如执行这个Taro点request，但是我为什么我就不用这个Tarorequest？其实我之前也给大家分享过一个库，你能够根据后端文档快速生成前端的请求代码，我们传统的开发方式是每一个请求写一个发送请求的代码，那这种开发方式效率太低了。对，正，推荐大家用这种更高效的开发方式，就是根据后端接口文档自动生成请求，这里有一个生成请求的库推荐给大家，叫5米jsopenAPI，这个库非常简单，你只需要首先安装它，然后我们在项目征目录下新建这样一个配置文件，你只要运行这样一行命令，就能根据你后端的此外者接口文档帮你生成前端的请求代码，但是它生成的请求代码是类似extras的语法想要让它生成的请求代码也能在Taro项目中正常运行，那你就可以用这个适配器库。那这里就是给大家抛砖引玉，可能还会遇到一些其他的问题，比如我们网页开发是不是需要存储用户的登录信息？那同样的小程序也有一个存储用户信息的方式，那比如说存储用户登录信息全局状态管理。那这些需求如果你之前没做过，你又想学怎么办呢？有经验的程序员都会这么干，就去搜一下官方文档，打开Taro的官方文档，直接搜一下存储，这里有很多什么数据的缓存，对吧？点进来Taro，点setstorage，人家就告诉你了，你怎么去使用Taro来存储前端的数据？那比如说我们小程序开发是不是涉及到一个经典的需求叫页面跳转？比如说我们搜跳转，诶，这里有一个路由功能跳转，你会发现其实就一行代码，我们就从这个坤坤页面跳到主页，好吧？来，我们找到这个坤坤页面的代码，这里我们给这个按钮添加一个点击事件onclick，这里是需要一点前端支持的，我们把刚刚粘的跳转代码粘过来，按Alt加回车，引入Taro这个框架，我们再改一下要跳转到