开发环境以及demo:参见官方文档详解app.json配置

网络整理 2022-05-19 15:18

开发环境及演示：

查看官方文档，注册->安装开发工具->新建项目，demo运行即可。

这一步比较简单，按照提示一步步安装，然后用微信扫二维码登录即可。至此，小程序的开发环境就基本完成了。

代码构成

文件详情 app.json 是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部选项卡等。demo项目中app.json配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

简单说一下这个配置每一项的含义：

pages 字段——用于描述当前小程序的所有页面路径。这是为了让微信客户端知道你的小程序页面当前定义在哪个目录。

window field - 小程序所有页面的顶部背景颜色，文本颜色在这里定义。

详细配置请参考：小程序配置app.json

project.config.json，开发工具本身的个性化配置，如界面颜色、编译配置等。其他配置项详细请参考文档开发者工具配置。 page.json其实是用来表示pages/logs目录下logs.json等小程序页面相关的配置。

如果你的整个小程序的样式是蓝色的，那么你可以在 app.json 中声明顶部的颜色为蓝色。实际情况可能并非如此。也许你的小程序中每个页面都有不同的色调来区分不同的功能模块。因此，我们提供了page.json，以便开发者可以独立定义每个页面的一些属性，比如只说顶部颜色，是否允许下拉刷新等。

其他配置项详见小程序配置页面.json。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

4.wxml和wxss其实是对html和css的扩展，增加了一些属性比如wx:if和{{}}这样的表达式配合js来管理状态。和vue一样，写过模板引擎的同学也可以很快上手。

小程序能力

这一章其实是大家关心的，一个小程序能调用微信什么能力。请参阅小程序的 API。

例如：

请求：

wx.request({
  url: 'test.php', 
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }

需要注意的是小程序只能请求https接口小程序没有域名怎么办，开发模式下可以打开详情-不验证合法域名、web-view（业务域名）、TLS版本和HTTPS证书调试 http 请求。

获取位置：

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})