菜鸟学习小程序之路（一）

一、代码构成

1、.json 后缀的 JSON 配置文件 页面配置。
2、.wxml 后缀的 WXML 模板文件 页面结构。
3、.wxss 后缀的 WXSS 样式文件 页面样式表。
4、.js 后缀的 JS 脚本逻辑文件 页面逻辑。

二、JSON 配置

1、pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2、window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

1、 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

2、page.json 具体看官网

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

3、WXML 模版

view, button, text等

4、WXSS 样式

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx

5、JS 交互逻辑

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>Page({clickMe: function() {this.setData({ msg: "Hello World" })}
})

6、小程序启动方式

1、紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

{"pages":["pages/index/index","pages/logs/logs"]
}

分别位于 pages/index/index 和 pages/logs/logs 目录。而写在 pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。

2、小程序启动之后 app.js中触发 onLaunch

App({onLaunch: function () {// 小程序启动之后 触发}
})

7、程序和页面

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

Page({data: { // 参与页面渲染的数据logs: []},onLoad: function () {// 页面渲染后 执行 这个回调处理你的逻辑。}
})

8、组件

<map></map><map longitude="广州经度" latitude="广州纬度"></map>

9、Api

1、要获取用户的地理位置时，只需要：

wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 经度var longitude = res.longitude // 纬度}
})

1、调用微信扫一扫能力，只需要：

wx.scanCode({success: (res) => {console.log(res)}
})

二、框架 —— 配置是整个小程序的总配置项

1、app.json

文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
"pages": [        // 设置页面路径"pages/index/index","pages/logs/index"
],
"window": {       // 设置默认页面的窗口表现"navigationBarTitleText": "Demo"
},
"tabBar": {     // 设置底部tab表现"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/logs","text": "日志"}]
},
"networkTimeout": {    // 设置网络超时时间"request": 10000,"downloadFile": 10000
},
"debug": true     // 是否开启debug模式
}

1）、pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

{
"pages":["pages/index/index","pages/logs/logs"
]
}

2)、window

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

navigationBarBackgroundColor   导航栏背景颜色
navigationBarTextStyle    导航栏标题颜色
navigationBarTitleText  导航栏标题文字内容
navigationStyle    导航栏样式  只在app.json中生效backgroundColor    窗口颜色
backgroundTextStyle  下拉 loading 的样式 支持 dark/light
backgroundColorTop   顶部窗口背景色  仅iOS
backgroundColorBottom  底部窗口的背景色  仅iOS
enablePullDownRefresh  是否开启下拉刷新
onReachBottomDistance  页面上拉触底事件触发时距页面底部的距离

3)、tabBar

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

color     tab上的文字默认颜色
selectedColor    tab上的文字选中时的颜色
backgroundColor  tab背景色
borderStyle      tabbar 上边框的颜色，仅支持black/white
list     tab 的列表
position   可选值  bottom/top

注：
list接受一个数组，数组中的每一项都是一个对象
pagePath  页面路径，必须在 pages 中先定义
text    tab上的按钮文字
iconPath    图片路径
selectedIconPath   选中时的图片路径

4)、networkTimeout

request      wx.request的超时时间connectSocket    wx.connectSocket的超时时间uploadFile    wx.uploadFile的上传时间downloadFile    wx.downloadFile 的超时时间

5)、debug

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

6)、page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

navigationBarBackgroundColor   导航栏背景颜色
navigationBarTextStyle    导航栏标题颜色
navigationTitleText      导航栏标题文字颜色
backgroundColor         窗口背景色
backgroundTextStyle    下拉 loading 的样式
enablePullDownRefresh     是否开启下拉刷新
disableScroll          设置为 true 则页面整体不能上下滚动
onReachBottomDistance    页面上拉触底事件触发时距页面底部距离

总结：这是微信小程序中最基础最细节的部分，也是小程序的骨干部分，多加练习。

这也是我学习微信api文档的笔记，会不定时更新中，业精于勤，荒于嬉。。。

做一个快乐小码农，啊哈哈哈，去写bug咯~~~