阅读 1910

微信小程序实战教程

前言

小程序到现在已经发展了几年了,几乎变成前端人员必备的知识。最近重温了微信小程序的文档,决定使用原生微信小程序语法写一个仿制知乎的项目练手,下面的教程分为两块,分别是:

  • 微信小程序实战教程之1.基础知识。
  • 微信小程序实战教程之2.仿制知乎项目。

对微信小程序的目录结构、语法等基础知识还不了解的伙伴建议从1.基础知识看起。

准备工作

  • CSS采用SCSS编写,对SCSS不熟悉的同学也可以直接使用CSS编写样式。
  • 布局采用弹性布局
  • JS使用ES6语法。
  • 该项目主要写前端部分,所以不写后端接口,使用MockJS模拟后端接口返回数据。

下面的教程我主要讲代码结构与思路,不会无脑堆代码。使用面向对象的设计模式,通过ES6提供的类与模块概念,合理的组织/分离代码。

在看教程之前,可以先将我的 项目下载下来放到微信开发者工具中运行,一边看源代码和效果一边看教程。

使用vscode开发微信小程序

使用什么IDE是开发者自己的选择,微信开发者工具使用起来总有一些不顺手,所以我使用我比较熟悉的vscode进行开发,顺便在这里给使用vscode的伙伴推荐几个实用插件:

  • minapp

    提供微信小程序标签、属性的智能补全,同时会提供中文文档的智能提示。

  • wechat-snippet

    提供微信小程序中代码的智能补全,可以作为上一个插件的补充

  • wxml

    提供wxml文件的代码高亮以及格式化代码功能

  • Live Sass Compiler

    提供scss文件转换为wxss文件的功能。这个插件默认是将scss文件转换为css文件,需要改为scss文件装换为wxss文件需要修改配置文件,在项目根目录中找到.vscode文件夹(没有的话直接创建一个),然后找到setting.json文件(没有的话创建一个),修改文件内容为:

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".wxss",
            "savePath": null
        }
    ]
}
复制代码

效果

教程

  • 微信小程序实战教程之1.基础知识 传送门
  • 微信小程序实战教程之2.仿制知乎项目 传送门

交流

如果这篇文章帮到你了,觉得不错的话来点个Star吧。 github.com/lizijie123

关注下面的标签,发现更多相似文章
评论