微信小程序开发

发表于 分类于

app.json

这个作为配置文件入口，记录了页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

属性 类型 必填 描述
pages Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部tab的表现
networkTimeout Obiect 否 设置网络超时时间
debug Boolean 否 设置是否开启debug模式

window设置项：

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
navigationBarTextStyle String white 导航栏标题颜色，仅支持white/black
navigationBarTitleText String 导航栏标题文字内容

app.js

这个文件可以监听并处理小程序的生命周期函数、声明全局变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// app.js
App({
    onLaunch : function () {
        // do something
        console.log('onLaunch')
    },
     onShow : function () {
        // do something
        console.log('onShow')
    },
    onHide :  function () {
        // do something
        console.log('onHide')
    }
})

参数说明：

|属性|类型|描述|触发时机|
| :–: | :– :| :–: | :–: |
|onLaunch|Function|生命周期函数–监听小程序初始化|当小程序初始化完成时，会触发onLaunch（全局只触发一次）|
|onShow|Function|生命周期函数–监听小程序显示|当小程序启动，或从后台进入前台显示，会触发|
|onHide|Function|生命周期函数–监听小程序显示|当小程序从前台进入后台显示，会触发|
|其他|Any|开发者可以添加任意的函数或数据到参数中，用this可以访问|

小程序开发需要注意的一些细节

  • 修改页面的背景色

解决办法：

1
2
3
4
5
page{
  display: block;
  min-height: 100%;
  background-color: red;
}
  • 背景图片不支持相对路径

解决方法：使用image组件代替；或者使用绝对路径，使用绝对路径需要注意一点，在微信小程序官方平台后台设计允许访问的域名，不然请求不到。

  • 微信小程序中使用组件地图map展示国外的地点

解决方法：微信小程序默认调用的是腾讯地图api，可尝试用百度地图的小程序JavaScript API

  • 微信小程序页面栈最高只有5层

解决方法：确定页面跳转逻辑，在需要的位置使用页面重定向redirectTo

  • 网络请求的 referer

网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本。

  • 原生组件

map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。

  • 更多问题可以经常关注微信公众平台的开发者社区

开发者社区