微信小程序

li_aoqi 的博客

于 2021-04-05 12:14:46 发布

阅读量659

点赞数 2

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/li_aoqi/article/details/115439464

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了微信小程序的优势，如不占内存、即用即走，并详细阐述了学习小程序所需的基础，包括HTML、CSS和JavaScript知识。通过官方文档和实践项目来学习，同时提醒开发者注意小程序的特性，如需重新编译查看效果。文章还概述了小程序的基本文件类型和开发工具，推荐使用VScode配合微信开发者工具进行开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习微信小程序基础

前言：

大家对微信小程序并非陌生，在生活当中，人们无时无刻地利用着它，同时，提供了很大的方便。
用户可以通过微信的“扫一扫”或者搜索相关的小程序名称，即可快速应用。微信小程序作为近几年“微服务”的杰出代表，应用十分广泛。小程序是一种新的开放能力，开发者可以快速地开发一个小程序。
小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

一：小程序优势有哪些？

1.不占用手机内存
微信小程序几乎不占用系统内存，能给用户，尤其是低配手机用户一个良好的体验。

2.无需安装，用完即走（触手可及）
而微信小程序是建立在微信这个大平台的应用，使用时被打开，使用完毕就消失，而且随时都可被使用，做到了“用时打开，用完即走”。当然小程序还有其他优点，这里不再一一叙述。

二：学习微信小程序，需要什么基础？

HTML：至少常用的标签要学会使用，比如按钮标签，文本标签，要知道一些标签是干什么用的。
CSS：了解类选择器、标签选择器定义和用法；了解常用的属性。
熟练编程语言基础：java / js，主要是要熟练变量定义、if条件判断、字符数组。
了解JSON格式，生命周期函数

三：如何学习小程序？

根据官方文档，多写几个demo是就是学习微信小程序最好的方式。

学习前端基础，包括但不限于HTML + CSS + JS + JQ
学习小程序基础语法，了解小程序基本结构（JS、JSON、WXML、WXSS）.
实战做项目

初学者需要注意几点：
① 小程序不像vue那样，修改代码按下保存后，网页上会立刻见效。每一次修改代码后，如需看效果，必须重新编译或者按Ctrl + S 保存，然后等待模拟器重新加载主页，才可查看修改后的效果。
② 要善于调用模板或者接口，切忌大片自行编程。如果需要实现某个功能，先查询一下官网文档，是否有相应的模板或库。
③ 如果是需要对接数据库的项目，必须在开发前购买服务器，实名认证且备案，小程序开发时间一般少于服务器审核时间（对于小项目来讲），小程序请求的地址必须是已备案的域名。
④ 不要使用传统编程思想来看待小程序开发，小程序不像Java那样可以随心应手的写，其部分功能未必能够实现。

四：小程序项目的基本文件类型以及开发工具。

一定要把微信开放文档文档看懂会用，涉及到一系列框架、组件、API、云开发等，都可以为开发提供帮助。

初次开发微信小程序，需要到微信公众平台进行信息注册，然后进行邮箱验证，后期开发会用到appID，也可以用测试号开发，测试号开发不能上线，得需要后期更改测试号。可以通过真机调试出测试效果！

微信有自己的开发工具，具体下载配置如下：
① 首先安装开发工具！
根据微信开发文档，下载安装开发工具微信小程序开发者工具，了解开发工具的功能。

在这里插入图片描述

②全局配置文件信息

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

 {
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

②页面配置信息
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

五、总结

微信小程序的开发者工具，我个人建议做程序调试预上线用，在程序开发的时候用VScode开发。
用VsScode开发工具开发，需要配置一些相关插件，插件有：minapp 、wxapp-helper、wxml、小程序开发助手，把这4个插件安装上，就非常好用了。
你可以通过VsScode 开发，用微信开发工具做调试。