微信小程序基础入门

前言

今天抱着学习新技术的心态开始第一次接触微信小程序，甭管外面怎么吹捧小程序，咱们学到就是赚到，好啦，废话不多说，开始学习！！

一、简介

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不关心是否安装太多应用的问题。应用将无处不在，随时随地可用，但又无需安装卸载。

至此，我们可以总结下小程序的特点：

• 无需下载和安装
• 用完即走
• 随时可用

二、安装

1、小程序注册（传送门）

注册完之后就可以在开发设置中看到APPID了，到这里个人申请小程序已经顺利完成了非常重要的准备工作了，传送门

2、下载微信开发者工具 （传送门）
安装完成之后，新建我们的第一个项目

接下来点击工具上的编译按钮，可以在工具的左侧模拟器界面看到这个小程序的表现，也可以点击预览按钮，通过微信的扫一扫在手机上体验你的第一个小程序。

3、小程序代码构成
在我们刚刚创建的项目中，可以留意到在这个项目中生成了不同类型的文件
1、.json 后缀的 JSON 配置文件
2、.wxml 后缀的 WXML 模板文件
3、.wxss 后缀的 WXSS 样式文件
4、.js 后缀的 JS 脚本逻辑文件

这里我只说一下，我认为重要的两点，详情请参考（传送门）

先说说app.json这个脚本要注意的地方

 { 
 	  "pages":[
		 "pages/index/index",
		  "pages/logs/logs"
	  ], //这里是配置你小程序里所有的页面的，如果你要新添加了页面，记得一定要在这里配置好 
	
	 "window":{//这里就是页面属性及样式的配置了，大家可以去更改下配置去看看具体的效果 
		 "backgroundTextStyle":"light", 
		 "navigationBarBackgroundColor": "#fff", 
		 "navigationBarTitleText": "WeChat",  
		 "navigationBarTextStyle":"black"  
	  } 
} 

再来说说app.wxss
app.wxss 是整个小程序的公共样式表

.container { //看到这个很熟悉了吧,.class呦，你明白就好 
  height: 100%; display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-between;  
  padding: 200rpx 0;  
  box-sizing: border-box; 
   }

OK，对于小程序，我们有了大概的了解，这里值得一提的是，每当我们新建一个页面，就要在app.json中配置该页面（很重要）

4、小程序的配置
全局配置 （app.json）
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

完整配置项说明请参考 （传送门）
页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

完整配置项说明请参考 （传送门）

三、API

事件监听 API
以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

//这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
wx.onCompassChange(function (res) {
  console.log(res.direction)
})

同步 API
以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，

//同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。
这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果

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

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})
调用微信扫一扫能力，只需要：

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

注：多数 API 的回调都是异步，需要处理好代码逻辑的异步问题

四、小程序手机预览

当我们做完小程序后，就可以打开手微信扫描件二维码，然后在手机看我们做的小程序啦，是不是很nice~，是不是敲有成就感喔

今天主要先了解一下微信小程序，后续在讲解其他内容