微信小程序——从零搭建

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、确定开发权限
  • 二、IDE
  • 三、创建项目
  • 四、基本结构


前言

这篇主要给微信小程序菜鸟参考。

有时候,后端猿猴也需要撸一把微信小程序。前几年弄过微信小程序,太久不用,又忘了,重新摸索了一遍,记录一下,避免一坑重踩。

一、确定开发权限

  • 打开“微信公众平台”,使用手机微信扫描登录二维码,手机上弹出的选项中若有目标小程序,则表明可以对此小程序进行开发;否则需要目标小程序的管理员将你的微信设为开发者(或管理员),然后重复如前步骤
  • 点击弹出的小程序,登录小程序管理平台,查看或配置基本参数,如查看小程序密钥、AppId,或设置服务端域名白名单
  • 若无目标小程序,可以申请一个,也可以使用测试号(就是下面填写 AppId的时候随便写一个)

二、IDE

  • 建议使用官方的“微信开发者工具”,里面的自动提示直接关联微信官方文档,可以快速查阅API文档,且可以一键上传代码到微信,比较方便

三、创建项目

  • 打开“微信开发者工具”,使用手机微信进行开发者登录
  • 创建新项目或者导入已有项目,注意 AppId需要填写目标小程序的 AppId;使用测试号的,可以随便填一个然后点击右边“使用测试号”
  • 测试号不能发布,也不能生成体验版,只能自己给自己玩
  • “开发模式”默认就是小程序,另有一个“插件”选项,是给老鸟开发小程序插件用的,菜鸟就不要看它了
  • “服务后端”默认是“使用云服务”,就是用微信提供的后端服务和数据库啥的(推销他们的产品),没有且不能自己搭建后端环境的可以试用一下;正经开发者一般都有自己的后端环境,就选“不使用云服务”
  • “模板选择”根据项目对应的业务和熟悉的前端语言(js/ts)选一个模板,不知道选啥就用“JavaScript-基础模板”,工具会帮你生成基础代码
  • 创建成功后,打开项目,进行开发界面
    微信小程序——从零搭建_第1张图片

四、基本结构

  • 正经的小程序代码结构如下:
  • 项目名
    • 1 pages[页面文件夹]
      所有的页面都放在这个目录下,一般一个子目录对应一个页面,结构参考“index”

      • 1.1 index[首页目录]
        • 1.1.1 index.js:JS代码文件
        • 1.1.2 index.json:json数据文件
        • 1.1.3 index.wxml:微信文本文件,类似于HTML
        • 1.1.4 index.wxss:微信样式文件,类似于CSS
    • 2 app.js:全局js文件,小程序启动就会加载

    • 3 app.json:全局json文件

    • 4 app.wxss:全局样式文件

    • 5 project.config.json:项目配置文件

    • 6 project.private.config.json:项目私有配置文件,优先级高于 project.config.json,一般是本地个性环境的配置

    • 7 sitemap.json:页面索引配置文件,用来配置小程序及其页面是否允许被微信索引(类似百度搜索)

    • 8 其他:自定义的文件或文件夹,如 readme.md或utils、image等
      微信小程序——从零搭建_第2张图片

你可能感兴趣的:(javaScript,微信小程序,小程序)