微信⼩程序开发:入门

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

准备

⼩程序的开发有两样东⻄必不可少,⼀个是⼩程序开发的技术⽂档;还有⼀个就是⼩程序的开发者⼯具

开发者⼯具:微信开发者⼯具

技术⽂档:微信官方文档

注册与管理

注册⻚⾯:⼩程序注册

⚠️注意:注册⼩程序时不能使⽤注册过微信公众号、微信开放平台的邮箱哦,也就是需要你使⽤⼀个其他邮箱才⾏。

后台管理:⼩程序管理

进⼊到⼩程序的后台管理后,点击左侧菜单底部的「设置」,在「基本设置」的底部有个「AppID(小程序ID)」这个后续开发时需要用到。

⚠️注意:⼩程序和微信公众号的登录⻚都是同⼀个⻚⾯,他们会根据你的不同的注册邮箱来进⾏跳转。

新建项目

安装完开发者⼯具之后使⽤微信扫码登录开发者⼯具,然后使⽤开发者⼯具新建⼀个⼩程序的项⽬

  • 项⽬名称:这个可以根据⾃⼰的需要任意填写,可以是中⽂;
  • ⽬录:需要先在电脑上新建⼀个空⽂件夹,然后选择这个空⽂件夹;
  • AppID:就是上述后台管理中的「AppID(⼩程序ID)」(也可以点击右边的下拉框,下拉选择AppID)
  • 开发模式:⼩程序
  • 后端服务:先选择不使⽤云服务,
  • 语⾔:JavaScript

点击「新建」确认之后就能在开发者⼯具的「模拟器」⾥可以看到⼀个简单的「Hello World 模板⼩程序」,在「编辑器」⾥可以看到这个⼩程序的源代码。

分别点击开发者⼯具⼯具栏上的模拟器、编辑器、调试器,以及下⾯的⼿机下拉框、显示百分⽐,看看有什么效果。大致熟悉下界面。

点击工具栏上的预览,可以获得一个二维码,使用手机微信扫描这个二维码就可以获得当前正在开发的小程序。

⽂件结构与⻚⾯组成

⽂件结构

⼩程序的⽂件结构在开发者⼯具的编辑器⾥可以看到⼩程序源⽂件的根⽬录下有 app.js、app.json 和 app.wxss,这是⼩程序必不可少的三个主体⽂件。

  • app.json:⼩程序的公共设置,可以对⼩程序进⾏全局配置,决定页⾯⽂件的路径、窗⼝表现、设置多 tab 等;
  • app.wxss:⼩程序的公共样式表,可以配置整个⼩程序的⽂字的字体、颜⾊、背景,图⽚的⼤⼩等样式;
  • app.js:⼩程序的逻辑
  • pages ⽂件夹:这⾥存放着⼩程序的所有页⾯,展开 pages ⽂件夹就可以看到有 index 和 logs 两个页⾯⽂件夹;

⻚⾯组成

在每⼀个⻚⾯⽂件夹⾥都有四个⽂件,这四个⽂件的名称都是⼀样的,它们分别为:

  • json ⽂件:和上⾯的 app.json 作⽤基本相同,只是 app.json 控制的是整个⼩程序的设置,⽽页⾯的 json ⽂件只控制单个页⾯的配置(因为有时候全局配置就够⽤了,所以页⾯配置有时候是空的);
  • wxml ⽂件:⼩程序的页⾯结构,⽂字、图⽚、⾳乐、视频、地图、轮播等组件都会放在这⾥;
  • wxss⽂件:⼩程序的页⾯样式,和app.wxss⼀样是控制样式,⽽页⾯的wxss⽂件是控制单个页⾯的样式;
  • js⽂件:这个是控制⼩程序页⾯的逻辑

全局配置

综上所述,app.json 可以对整个⼩程序进⾏全局配置,⽽配置的依据需要参考技术⽂档:全局配置

设置⼩程序窗⼝表现

打开 app.json ⽂件,可以看到如下代码⾥有⼀个 window 的字段名

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light", // 改成 "dark"
    "navigationBarBackgroundColor": "#fff", // 改成 "#1772cb"
    "navigationBarTitleText": "WeChat", // "微信小程序"
    "navigationBarTextStyle": "black" // "white"
  },
  "sitemapLocation": "sitemap.json"
}

按照注释针对 windows 稍作修改如下,然后点击「编译」按钮看看「模拟器」的变化。

新建⼩程序⻚⾯

新建⻚⾯的⽅法有两种,⼀种是使⽤开发者⼯具在 pages ⽂件夹下新建;还有⼀种是通过 app.json 的 pages 配置项来新建

通过app.json新建⻚⾯

pages 配置项是设置⻚⾯的路径,也就是在⼩程序⾥写的每⼀个⻚⾯都需要填写在这⾥。

使⽤开发者⼯具打开 app.json ⽂件,在 pages 配置项⾥新建⼀个 home ⻚⾯(⻚⾯名称可以是任意英⽂名),代码如下:

{
  "pages": [
    "pages/home/home", // 新建一个页面路径
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

保存后会在「模拟器」看到「pages/home/home.wxml」

但如果你在「模拟器」和「调试器」看到错误提示「./pages/home/home.wxml not found」请不要慌张,微信开发者工具从创立之初到现在不客气的说就是个朝令夕改、Bug 四溢的开发工具,重启就行了。

⼩程序的⾸⻚

app.json ⽂件中 pages 数组的第一项代表小程序的初始页面(首页)。

  "pages": [
    "pages/home/home", // 谁在第一谁是小程序首页
    "pages/index/index",
    "pages/logs/logs"
  ]

配置 tabBar 项

在很多 App 的底部都有⼀个带有⼩图标的切换 tab,⽐如微信底部就有:

  • 微信
  • 通讯录
  • 发现

四个 tab,左侧的小图标就是 icon,整个底部就是 tabBar,⼩程序也可以有这样的功能,在 app.json ⾥配置 tabBar 配置项里进行设置,可以先查阅下 tabBar 文档

按照文档要求,icon 大小限制 40 kb、建议尺寸 81px * 81px、已经 PNG 文件格式,对于 icon 的获取在此推荐阿里巴巴的 Iconfont,上面有很多精美的成品。

⚠️注意:注意微信的选项卡在选中时和未选中时的颜色状态是不一样的,所以你在下载图标时最好下载两套同样风格但颜色是一明一暗的图标。

下载好图标后可以在项目目录内新建一个名为「images」的文件夹将图标放入其中。

通过 tabBar 配置项,可以设置 tabBar 的默认字体颜⾊、选中过的字体颜⾊、背景⾊等。

先⼤致了解 color、selectedColor、backgroundColor 的意思。然后使⽤开
发者⼯具打开 app.json 在 window 配置项后⾯新建⼀个 tabBar 配置项,代码如下:

{
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#13227a",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "image/icon-tab1.png",
        "selectedIconPath": "image/icon-tab1-active.png",
        "text": "⾸⻚"
      },
      {
        "pagePath": "pages/list/list",
        "iconPath": "image/icon-tab2.png",
        "selectedIconPath": "image/icon-tab2-active.png",
        "text": "活动"
      },
      {
        "pagePath": "pages/partner/partner",
        "iconPath": "image/icon-tab3.png",
        "selectedIconPath": "image/icon-tab3-active.png",
        "text": "伙伴"
      },
      {
        "pagePath": "pages/more/more",
        "iconPath": "image/icon-tab4.png",
        "selectedIconPath": "image/icon-tab4-active.png",
        "text": "更多"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

这⾥有⼀个⽐较重要的属性就是 list,它是⼀个数组,决定了 tabBar 上⾯的字、icon、以及点击之后的跳转链接。

  • pagePath:必须为我们在pages配置项⾥建好的页⾯
  • text:是tab按钮上的⽂字
  • iconPath、selectedIconPath:分别为没有选中时的图⽚路径和选中时的图⽚路径。

全局配置项⾥有太多的参数可能对新⼿来说显得有点复杂,这时候可以参考⼀下⼀个⽐较⼤的项⽬是如何配置的,全局配置参考,⼤家只需要关注 window、pages、tabBar 的配置项即可。

⼩程序的⻚⾯配置

前面说了小程序整体的页面风格配置,那如果是某个页面呢?比如刚才新建的 home 页面,在其目录下有个 home.json,找到并将其打开,进行类似 app.json 的设置。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ce5a4c",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "⼩程序⻚⾯",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

保存后看看「模拟器」,这时 home 页面(因为 home 页面放在了 app.json 下 pages 的第一个也就是主页,所以在编译后默认显示的就是 home 页面)就变成了橙红色。

Conners Hua

这个家伙很懒,什么都没有留下。

1 条回应

  1. Hikkess说道:

    在线 CS:GO 小程序

Hikkess进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注