微信小程序学习笔记一

JS-SDK 开放拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等API，解决移动网页能力不足的问题，然而用户访问网页，浏览器开始显示之前有一个白屏的过程

增强版，“微信Web资源离线存储”

影响Web体验的问题：白屏，页面切换的生硬，点击的迟滞感

小程序

快速的加载，更强大的能力，原生的体验，易用且安全的微信数据开放，高效简单的开发

逻辑层，渲染层分离

运行环境	逻辑层	渲染层
IOS	JSCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

开发你的第一个小程序

在官方文档中下载安装适合你的微信小程序开发工具，配置测试号

成功进入之后显示如下，（点击左上角的编译可在左侧看到小程序的显示样式）

代码构成

项目自动生成了不同类型的文件：

1. .json后缀的配置文件；
2. .wxml后缀的WXML模板文件；
3. .wxss后缀的WXSS样式文件；
4. .js后缀的JS脚本逻辑文件；

JSON配置

小程序配置app.json

当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab等

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],//描述所有页面路径，目的是为了让微信客户端知道当前你的小程序页面定义在哪个目录
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor":"#fff",
        "navigationBarTitleText":"WeChat",
        "navigationBarTextStyle":"black"
    }//所有页面的顶部背景颜色，文字颜色定义等
}

工具配置project.config.json

在工具上做的任何配置均会写入此文件，重新安装工具或更换电脑工作，只要载入同一个项目的代码包，开发者工具会自动帮你恢复至当时开发项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等等一系列选项

页面配置page.json

pages/logs目录下的logs.json这类与小程序页面有关的配置

可让开发者独立定义每个页面属性，例如顶部颜色，是否允许下拉刷新等

完整页面配置

JSON语法

1. 数字，包含浮点数，整数；
2. 字符串，包裹于双引号中；
3. Bool值，true或false；
4. 数组，包裹于[];
5. 对象，包裹于{};
6. Null

【注】 无法使用注释，试图添加注释会报错

WXML 模板-------html

打开pages/index/index.wxml,有如下内容

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

1. 标签名不同；

2. 增加wx:if这样的属性以及{{}}这样的表达式

   MVVM开发模式(例如React,Vue)，提倡将渲染、逻辑分离，即让JS直接操控DOM，JS只需管理状态，然后通过一种模板语法来描述状态和界面结构的关系

   栗子：将一个Hello World的字符串显示在界面上

   WXML

   <text>{{msg}}</text>//数据绑定
   <view wx:for="{{array}}"> {{item}} </view>//列表渲染
   //条件渲染
   <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
   <view wx:elif="{{view == 'APP'}}"> app </view>
   <view wx:else="{{view == 'MINA'}}"> MINA </view>
   

   JS只需管理状态

   //数据绑定
   this.setData({msg:"Hello World"})
   //列表渲染
   Page({
       data:{
           array:[1,2,3,4,5]
       }
   })
   //条件渲染
   Page({
       data:{
           view: 'MINA'
       }
   })
   

   ({})将一个变量绑定至界面上，称之为数据绑定，加上if/else,for等控制能力，在小程序里，这些控制能力均用 wx:开头的属性表达

WXSS样式------css

1. 新增尺寸单位

   rpx

2. 提供全局样式和局部样式

   app.wxss作为全局样式，作用于所有页面，page.wxss仅对当前页面生效

3. 仅支持部分css选择器

JS逻辑交互

响应用户的点击、获取用户位置等，小程序中编写JS脚本文件处理用户的操作

<view>{{msg}}</view>
<button bindtap="clickMe">点击我</button>

点击button按钮时，希望将界面上msg显示为"Hello World",于是在button上声明一个属性:bindtap,JS文件中声明clickMe方法响应这次点击事件

Page({
    clickMe:function(){
        this.setData({msg:"Hello World"})
    }
})

此外还可调用小程序提供的丰富的API，例如获取用户信息、本地存储、微信支付等

调用wx.getUserInfo获取微信用户的头像和昵称，最后通过setData将获取的信息显示至界面

API文档

事件监听API

规定以on开头的API用来监听某个事件是否触发，wx.onSocketOpen

接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入

wx.onCompassChange(function(res){
    console.log(res.direction)
})

同步API

规定以Sync结尾的API都是同步API，其执行结果可通过函数返回值直接获取，若执行出错会抛出异常

try{
    wx.setStorageSync('key','value')
}catch(e){
    console.error(e)
}

异步API(占多数)

Object参数说明

参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功，失败均执行)
其他	Any	-	接口定义的其他参数

回调函数的参数

success,fail,complete函数调用时会传入一个Object类型参数，包含以下字段

属性	类型	说明
errMsg	string	错误信息，若成功返回${apiName}:ok
errCode	number	错误码，仅部分API支持，成功时为0
其他	Any	接口返回的其他数据

异步API执行结果需通过Object类型的参数中传入的对应回调函数获取，部分API也有返回值，

wx.login({
    success(res){
        console.log(res.code)
    }
})