微信小程序学习（一）

新建第一个项目：FirstProgram，界面如下。点击"编译"，可以在工具的左侧模拟器界面看到这个小程序，或者点击"预览"，可以通过微信的扫一扫在手机上体验小程序。

Json配置文件：.json文件中不允许添加任何的注释

1. app.json：小程序的全局配置，如页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

a.pages字段 —— 用于描述当前小程序所有页面路径，每一项代表对应页面的【路径+文件名】信息，

文件名不需要写文件后缀。pages 字段的第一个页面就是这个小程序的首页(打开小程序看到的第一

个页面)。

b.window字段 —— 用于设置小程序的状态栏、导航条、标题、窗口背景色。

c.networkTimeout字段 —— 用于设置各种网络请求的超时时间。如果超过指定的时间，则会进入fail().

2. project.config.json：小程序的工具配置，如个性化配置等。

3. logs.json：小程序的页面配置，开发者可以独立定义每个页面的属性。app.json对全局有效，

logs.json对本页面有效。

小程序与网页的区别：

1.网页：

HTML——描述当前这个页面的结构，主要标签有：div、p、span

CSS——描述页面的样子

JS——处理页面和用户的交互

2.小程序：渲染WXML和逻辑JS分离

WXML——主要标签有：view、button、text等；

{{}}：数据绑定，把一个变量绑到界面上。

wx.if

wx.else

WXSS——WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改：

1.WXSS在底层支持新的尺寸单位rpx；

2.提供了全局的样式app.wxss和局部样式如：logs.wxss，类似app.json与logs.json.

3.WXSS仅支持部分CSS选择器。

JS——与用户交互，可以在 JS 中调用小程序提供的丰富的 API。

小程序启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行，整个小程序只有一个 App 实例，是全部页面共享的，APP函数用来注册一个小程序。App() 必须在 app.js 中注册，且不能注册多个。不要在 onLaunch 的时候调用 getCurrentPages() ，此时 page 还没有生成。

紧接着通过 app.json 的 pages 字段就可以知道当前小程序的首页路径，于是微信客户端就把首页的代码index.js、index.wxml、index.wxss装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。
index.js中存在 getApp() 函数，使用该函数应注意：

1.全局的 getApp() 函数可以用来获取到小程序实例。

2.不要在定义于 App() 内的函数中（app.js）调用 getApp() ，使用 this 就可以拿到 app 实例。

3.通过 getApp() 获取实例之后，不要私自调用生命周期函数。

渲染页面：以logs(有logs.json文件)为例，微信客户端会先根据 logs.json 配置生成一个界面，紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式，最后客户端会装载 logs.js。
logs.js中：Page：页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和.wxml 一起渲染出最终的结构。

小程序API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

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

wx.getLocation({

type: 'wgs84',

success: (res) => {

var latitude = res.latitude // 经度

var longitude = res.longitude // 纬度

}

})

2.调用微信扫一扫能力，只需要：

wx.scanCode({

success: (res) => {

console.log(res)

}

})

微信小程序学习（一）

相关推荐