微信小程序项目开发实战（学习微信小程序开发需要具备哪些基础知识）

本文目录

• 学习微信小程序开发需要具备哪些基础知识
• 微信小程序实战小程序实例
• 盘点 7 个超棒的微信小程序项目
• 微信小程序开发实战阅读列表不出现怎么回事

学习微信小程序开发需要具备哪些基础知识

小程序开发必备知识技能：

1、熟练掌握HTML语言、CSS、JavaScript

HTML就是超文本标记语言的简写，HTML是网页开发前端三剑客之一，主要负责网页的骨架，就如同动物的骨架一样，HTML语言就是支撑网页布局的骨架。CSS主要负责网页样式，网页内容如何分布，板块背景，颜色等外观问题可以有CSS控制。JavaScript是一种动态的脚本语言，在服务器端迸发出非凡的活力，成为当前非常活跃的语言之一。因此想要做小程序开发，就必须要掌握HTML语言、CSS、JavaScript。

2、服务器语言

如果不是专业的后端开发者，可能后端有一定的难度其学习曲线较陡。但是，仍然建议开发者学习一下后端语言，至少需要了解大致的原因框架，能够看懂其代码逻辑，这样不仅可以很好的实现前后端的配合，也能够在小程序出现bug的时候扯皮用。服务器的语言有很多比较常用的是PHP、Java、Python、ASP等技术，建议开发者根据公司内部技术的使用情况挑选进行学习。

3、数据库语言

如果公司数据量不大，架构不复杂的话数据库语言相对来说是比较简单的，一般学会一些常用的命令以及常出现的问题就能够应付使用。常用的数据库有免费的MySQL、msSQL、MongoDB、Oracle等数据库。

微信小程序一直的宗旨就是触手可及的体验，再伴随着微信移动端的巨大流量，小程序开发的前景在未来会更好。想要学习小程序开发的小伙伴，只需要学习一些网站开发的基本知识技能，在多动手自己练习一些项目，相信很快就能够自己亲自开发出一款小程序。

如果题主想学微信小程序开发的话，可以去腾讯课堂上找李明杰老师的小程序开发课程，讲的非常详细，很适合小白学，想学的同学也可以去了解一下。

最后希望你在小程序开发道路上一帆风顺!

微信小程序实战小程序实例

进入微信公众平台，注册一个小程序帐号，并根据提示填写相应的信息。

2.成功注册后，进入主页，然后在小程序发布过程-》小程序开发和管理-》配置服务器中单击“开发人员设置”。

3.将获得一个AppID并记录该AppID，该ID将在以后创建项目时使用。

盘点 7 个超棒的微信小程序项目

小程序上线后，改版了很多次，包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的，本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中，不会遇到很多问题。

本文推荐的项目从入门到进阶都有，收藏起来吧。

02. 小程序书店

技术栈：Taro + Taro UI + Redux + Webpack + ES6 + Mock。这个项目可以作为你第一个小程序练手项目。

这个小程序非常简单，可以作为初学者第一个实战项目。帮助新手理解 Taro 与 Redux 的配合方式与 Taro 的基本使用。本项目还提供了一个快速搭建本地 mock 服务的解决方案。

除此之外，这个项目还提供了学习文档：

03. 高仿喜马拉雅

如果你仅仅有 HTML CSS Js 的知识储备，想开发一个属于自己的小程序，这个 Demo 再适合你不过了，这个高仿喜马拉雅是一个初级项目完全使用微信小程序原生开发，没有使用自定义组件，非常的适合微信小程序开发新手。

04. 网易云音乐小程序

基于Taro与网易云音乐 api 开发，技术栈主要是：typescript+taro+taro-ui+redux+react-hooks。

目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，打造一个最佳实践项目，通过这个项目也可以帮助你快速使用 Taro 开发一个属于你自己的小程序。

这是该小程序实现的一些功能：

小程序 GitHub Trending Hub 是一个以 Feed 流形式查看 GitHub Trending 仓库集合的工具，通过它可以及时查看最近更新的热门仓库。

刚刚提及的项目适合新手入门，这个小程序适合进阶选手。这个程序涉及很多组件的使用比如：

07. 情书站点

第一个项目是校园小情书的微信小程序，该项目功能包括表白墙、树洞、校园论坛。

下载。

微信小程序开发实战阅读列表不出现怎么回事

　小程序提供打开新页面、页面重定向、页面返回、tabBar切换四种改变视图的机制，托管了页面的生命周期，并为应用提供了相应的生命周期事件，方便应用各阶段的业务处理，但页面之间相互跳转并没有相应的事件机制，例如——
　　1、A页面打开二级页B，B页面做了一些操作，要通知A页面做相应的处理。
　　2、从B页面携带一些数据，返回到A页面
　　以上两种小程序场景很常见，归结为页面间如何方便的进行交互，当然我们可以通过页面跳转传参或全局数据对象来达到目的，但是使用上有些束缚(转换参数或维护全局对象)，在此elong小程序项目中采用事件机制解决这一问题。我们重写了navigateToAPI，A页面调用该接口进行页面跳转后，方法返回给A页面一个事件对象 event，该对象可以注册自定义事件，目标页面(B页面)可以按照业务需求触发事件响应，同时将相关数据作为参数传递到监听处callback。
　　A页面
　　
微信小程序加载不出来
　　B页面
　　
微信小程序加载不出来
　　API
　　
微信小程序加载不出来
　　Event
　　
微信小程序加载不出来
　　打开二级页面效果图——
　　
微信小程序加载不出来
　　二、前后端同时开发过程中，前端如何方便的mock数据、特殊场景下前端如何方便的调整后端数据
***隐藏网址***
***隐藏网址***
　　
微信小程序加载不出来
　　url:后端接口url
　　params：接口入参，若配置了参数列表，则按参数列表自动序列化参数，若不配置，默认取调用接口时的第一个参数作为params
　　微信小程序加载不出来
　　method: 默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
　　noLoading: 默认false，即每个网络接口均出现loading效果
　　mockData：模拟后端数据，并行开发过程中必不可少
　　dataTransform:转换数据，满足特殊性处理
　　loading效果图——
　　
微信小程序加载不出来
　　数据请求——
　　
微信小程序加载不出来
　　三、若要所有的页面支持自定义事件、业务组件扩展等功能，又不想所有的页面中添加量大的方法，这就需要框架层提供统一的机制解决，elong小程序框架在此封装了Page、require等原生方法
　　1、require如果提供基准目录层次__dirname
　　a)require非相对目录时会自动补充相等层次
　　b)直接调用原生require
　　2、未提供基准目录层次_dirname，按当前目录寻找
　　
微信小程序加载不出来
　　3、Page 构造函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等，框架对Page做了重写，这样可以方便的使用扩展能力(页面事件、全局事件、内部组件、外部组件)，使用时仅需将原来的业务代码用包装器包装一下即可
　　
微信小程序加载不出来
　　重写后的Page增加了 委托生命周期函数、扩展事件机制、内置内部组件和外部组件扩展等功能(详见overwrite.js 文件)
　　
微信小程序加载不出来微信小程序加载不出来
　　四、小程序中提供了模板机制
　　可以方便的复用一段页面(wxml)代码，但需要手动将微信小程序模板中绑定的事件、数据注册到当前页面的Page下，而且不可以出现重名属性和方法，相当于仅是一个“插入”操作，目前无法像使用原生组件一样使用一个外部的独立组件。比如，业务中有一个独立的功能日历，我们通常希望这个日历组件是独立一体的，放在一个component文件夹下，日历组件包含自己的wxml、wxss、js，其中js的事件、数据注册不受太多限制(不关心是否和使用者命名冲突等)，为此 elong 小程序框架在重写Page时提供了扩展外部组件的功能。
　　详细使用规范——
　　1、wxml需要以模板的形式引入组件的wxml
　　2、wxss 需要引入组件的wxss
　　@import "filter/index.wxss";
　　3、js需要引入组件的js文件
　　var filter = require(’./filter/index’);
　　4、组件和页面见的事件传递需要在组件配置中声明
　　
微信小程序在开发时遇到的问题和处理方法
　　这些事件函数需要注册在页面中，组件中可以通过fireEvent的形式触发到这些事件。
　　5、组件中不可使用Page构造方法，因为组件不是页面，不需要注入小程序页面列表中，其他的事件函数、方法、数据的定义没有任何限制，不需要担心方法和属性的同名冲突，框架层将组件的属性和方法命名空间化赋予页面对象，并且如果组件中的方法用到this，在组件的方法执行时，框架会动态改变要操作的数据对象，保证组件中词法this就是组件的。
　　
小程序加载
　　*实现详见 overwrite.js 》 extendComponents方法