微信小程序入门教程:从零开始,轻松上手!

简介: 【2月更文挑战第2天】

小程序简介

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

小程序优点:无需安装,不占内存,易传播

小程序生态

开发准备

注册登录账号,安装开发者工具

注册小程序

小程序配置

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性。

属性

类型

描述

entryPagePath

string

小程序默认启动首页

pages(必填)

string[]

页面路径列表

window

Object

全局的默认窗口表现

tabBar

Object

底部 tab 栏的表现

networkTimeout

Object

网络超时时间

debug

boolean

是否开启 debug 模式,默认关闭

functionalPages

boolean

是否启用插件功能页,默认关闭

subpackages

Object[]

分包结构配置

workers

string

Worker 代码放置的目录

requiredBackgroundModes

string[]

需要在后台使用的能力,如「音乐播放」

requiredPrivateInfos

string[]

调用的地理位置相关隐私接口

plugins

Object

使用到的插件

preloadRule

Object

分包预下载规则

resizable

boolean

PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭

usingComponents

Object

全局自定义组件

配置

permission

Object

小程序接口权限相关设置

sitemapLocation(必填)

string

指明 sitemap.json 的位置

style

string

指定使用升级后的weui样式

useExtendedLib

Object

指定需要引用的扩展库

entranceDeclare

Object

微信消息用小程序打开

darkmode

boolean

小程序支持 DarkMode

themeLocation

string

指明 theme.json 的位置,darkmode为true为必填

lazyCodeLoading

string

配置自定义组件代码按需注入

singlePage

Object

单页模式相关配置

supportedMaterials

Object

聊天素材小程序打开

相关配置

serviceProviderTicket

string

定制化型服务商

票据

embeddedAppIdList

string[]

半屏小程序 appId

halfPage

Object

视频号直播半屏场景设置

debugOptions

Object

调试相关配置

enablePassiveEvent

Object或boolean

touch 事件监听是否为 passive

resolveAlias

Object

自定义模块映射规则

renderer

string

全局默认的渲染后端

entryPagePath

默认首页面。(不填,即默认pages列表的第一项)不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}

pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

在创建文件夹时,可以直接选用创建page.系统会自动创建好4个文件。

(未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。

小程序中新增/减少页面,都需要对 pages 数组进行修改。

"pages": [
    "pages/helloword/helloword",
    "pages/index/index"
  ]

window

用于设置小程序的状态栏,导航条,标题,窗口背景色。

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor(十六进制颜色)

#000000

导航栏背景颜色,如 #000000

navigationBarTextStyle

string

white

导航栏标题颜色,仅支持 black / white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。参见注 2。

homeButton

boolean

default

在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉 loading 的样式,仅支持 dark / light

backgroundColorTop

string

#ffffff

顶部窗口的背景色,仅 iOS 支持

backgroundColorBottom

string

#ffffff

底部窗口的背景色,仅 iOS 支持

enablePullDownRefresh

boolean

false

是否开启全局的下拉刷新。
详见 Page.onPullDownRefresh

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离,单位为 px。
详见 Page.onReachBottom

pageOrientation

string

portrait

屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化

restartStrategy

string

homePage

重新启动策略配置

initialRenderingCache

string

页面初始渲染缓存

配置,支持 static / dynamic

visualEffectInBackground

string

none

切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none

handleWebviewPreload

string

static

控制预加载下个页面的时机

。支持 static / manual / auto

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#fff",
    "enablePullDownRefresh": true
  }

tabBar

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性

类型

必填

默认值

描述

color

HexColor

tab 上的文字默认颜色,仅支持十六进制颜色

selectedColor

HexColor

tab 上的文字选中时的颜色,仅支持十六进制颜色

backgroundColor

HexColor

tab 的背景色,仅支持十六进制颜色

borderStyle

string

black

tabbar 上边框的颜色, 仅支持 black / white

list

Array

tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

position

string

bottom

tabBar 的位置,仅支持 bottom / top

custom

boolean

false

自定义 tabBar,见详情

list 接受一个数组,至少2个最多5个tab。每一项都是一个对象。

属性

类型

必填

说明

pagePath

string

页面路径,必须在 pages 中先定义

text

string

tab 上按钮文字

iconPath

string

图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
position top 时,不显示 icon。

selectedIconPath

string

选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
position top 时,不显示 icon。

iconfont可以去这里面找不同的颜色的图标。

https://www.iconfont.cn/

"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1AAD16",
    "backgroundColor": "#fff",
    "list": [
      {"pagePath": "pages/helloword/helloword",
      "text": "首页",
      "iconPath": "images/tabbar/tabbar1.png",
      "selectedIconPath": "images/tabbar/tabbar1_selected.png"
      },
      {
        "pagePath":"pages/index/index" ,
        "text": "测试"
      }
    ]

debug

可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有 Page 的注册,页面路由,数据更新,事件触发等。可以帮助开发者快速定位一些常见的问题。

"debug": true

permission

微信客户端 7.0.0 及以上版本支持

小程序接口权限相关设置。字段类型为 Object,结构为:

属性

类型

必填

默认值

描述

scope.userLocation

PermissionObject

位置相关权限声明

PermissionObject 结构

属性

类型

必填

默认值

说明

desc

string

小程序获取权限时展示的接口用途说明。最长 30 个字符

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

sitemapLocation

指明 sitemap.json 的位置;默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

"sitemapLocation": "sitemap.json"

themeLocation

自定义 theme.json 的路径,当配置"darkmode":true时,当前配置文件为必填项。

{
  "themeLocation": "/path/to/theme.json"
}

renderer

指定小程序全局的默认渲染后端。

可选值:webview, skyline

默认值:webview

页面配置

app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面配置项的优先级大于全局配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项(样式相关的配置项属于 app.json 中的 window 属性,但这里不需要额外指定 window 字段)。

文件内容为一个 JSON 对象,有以下属性(以下属性,页面配置可以覆盖全局配置):

属性

类型

默认值

描述

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色,如 #000000

navigationBarTextStyle

string

white

导航栏标题颜色,仅支持 black / white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式,仅支持以下值:
default 默认样式
custom 自定义导航栏,只保留右上角胶囊按钮。

homeButton

boolean

false

在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉 loading 的样式,仅支持 dark / light

backgroundColorTop

string

#ffffff

顶部窗口的背景色,仅 iOS 支持

backgroundColorBottom

string

#ffffff

底部窗口的背景色,仅 iOS 支持

enablePullDownRefresh

boolean

false

是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离,单位为px。
详见 Page.onReachBottom

pageOrientation

string

portrait

屏幕旋转设置,支持 auto / portrait / landscape
详见 响应显示区域变化

disableScroll

boolean

false

设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置

usingComponents

Object

页面自定义组件

配置

initialRenderingCache

string

页面初始渲染缓存

配置,支持 static / dynamic

style

string

default

启用新版的组件样式

singlePage

Object

单页模式相关配置

restartStrategy

string

homePage

重新启动策略配置

handleWebviewPreload

string

static

控制预加载下个页面的时机

。支持 static / manual / auto

visualEffectInBackground

string

切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none,若对页面单独设置则会覆盖全局的配置,详见 全局配置

enablePassiveEvent

Object或boolean

事件监听是否为 passive,若对页面单独设置则会覆盖全局的配置,详见 全局配置

renderer

string

渲染后端

{
  "usingComponents": {},
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#ccc",
  "navigationBarTextStyle": "black",
  "backgroundColor": "#ffffff",
  "enablePullDownRefresh": true
}

sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;

属性

类型

必填

描述

rules

Object[]

索引规则列表

rules配置项指定了索引规则,每一项规则都是json对象。并包含了action,page,params,matching,priority这几种属性。具体的规则实例可以参照文档。

官方文档

目录
相关文章
|
1月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
5月前
|
小程序 JavaScript 开发者
微信小程序wepy框架入门教程-底部导航栏效果(五)
微信小程序wepy框架入门教程-底部导航栏效果(五)
118 0
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
1月前
|
小程序 数据可视化 前端开发
微信小程序开发入门教程-文本组件介绍
微信小程序开发入门教程-文本组件介绍
|
1月前
|
存储 小程序 数据库
微信小程序云开发入门教程-服务开通
微信小程序云开发入门教程-服务开通
|
5月前
|
小程序
微信小程序wepy框架入门教程 - 安装less/sass(四)
微信小程序wepy框架入门教程 - 安装less/sass(四)
119 0
|
1月前
|
小程序 UED
人力资源小程序的设计与开发步骤
人力资源小程序的设计与开发步骤
16 1
|
1天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
1天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章