微信小程序学习

1、基础介绍

小程序是什么

小程序能够视为只能用微信打开和浏览的网站。小程序和网页的技术模型是同样的，用到的 JavaScript 语言和 CSS 样式也是同样的，只是网页的 HTML 标签被修改为了 WXML 标签，CSS标签被修改为了WXSS标签。css

小程序最大的优点就是基于微信，也不须要考虑iOS和Android不一样平台间的差别，同时微信也提供了丰富的API接口，例如拍摄、录音、语音识别、二维码等，小程序能够利用原生能力，快速进行开发。html

开发准备

去微信公众平台注册，申请一个AppId。android
下载小程序开发工具，微信开发者工具。git

建立一个项目

调试运行项目

小程序支持实时预览，代码修改后，左边预览窗口就能够直接看到修改后的效果。github

也能够点击预览按钮，经过微信的扫一扫在手机上体验。web

2、小程序项目结构

小程序包含一个描述总体程序的 app 和若干个描述页面的 page 组成。json

一个小程序主体部分由三个文件组成，必须放在项目的根目录，以下：小程序

文件	必需	做用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：微信小程序

文件类型	必需	做用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注册小程序

每一个小程序都须要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档。api

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
复制代码

整个小程序只有一个 App 实例，是所有页面共享的。开发者能够经过 getApp 方法获取到全局惟一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。它的做用有些相似Android 中的 Application。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
复制代码

全局配置

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
}
复制代码

注册页面

小程序的每一个页面，都须要在页面对应的js文件中进行注册，同时能够指定页面的初始数据、生命周期回调、事件处理函数等。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面建立时执行
  },
  onShow: function() {
    // 页面出如今前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})
复制代码

详细的参数含义和使用请参考 Page 参考文档。

页面配置

每个小程序页面也可使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

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

3、页面

WXML 模板

wxml文件用来描述页面展现的代码：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
复制代码

它和html页面主要有如下两个区别：

标签名字不太同样，微信小程序提供了丰富的组件供开发者使用，因此不须要使用相似 div、p、span的基础标签。
多了一些wx:if="{{!hasUserInfo && canIUse}}"这种{{}}的表达式，用的是 MVVM 的开发模式，将页面渲染和逻辑进行分离。经过 {{ }} 的语法把一个变量绑定到界面上，称为数据绑定。仅仅经过数据绑定还不够完整的描述状态和界面的关系，还须要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

JS交互逻辑

小程序为组件提供了不少交互属性，且使用很是简单：

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

//xxx.js
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})
复制代码

更详细的事件能够参考文档 WXML - 事件。

这里须要注意的是，直接修改 this.data 而不调用 this.setData 是没法改变页面的状态的。

页面跳转

框架以栈的形式维护了当前的全部页面。当发生页面切换的时候，页面栈的表现以下：

路由方式	页面栈表现	API
打开新页面	新页面入栈	wx.navigateTo
页面重定向	当前页面出栈，新页面入栈	wx.redirectTo
页面返回	页面不断出栈，直到目标返回页	wx.navigateBack
Tab 切换	页面所有出栈，只留下新的 Tab 页面	wx.switchTab
重加载	页面所有出栈，只留下新的页面	wx.reLaunch

开发者可使用 getCurrentPages() 函数获取当前页面栈。

具体使用：

//跳转到test界面
  skipTest(event) {
    wx.navigateTo({
      url: '../test/test',
    })
  }
复制代码

4、API 使用

存储

每一个微信小程序都有本身的本地缓存，能够经过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理。

其中以 Sync 结尾的表明同步操做，两者的区别在于，异步不会阻塞当前任务。

具体使用：

setStorageTest(event) {
    wx.setStorage({
      key: 'name',
      data: 'huangm',
      success(res) {
        console.log("storage success")
      }
    })
    console.log("storage end")
  }, 
  getStorageTest(event) {
    const that = this
    wx.getStorage({
      key: 'name',
      success (res) {
        that.setData({
          name: res.data
        })
        console.log(res.data)
      }
    })
    console.log('get Storage end')
  },
  deleteStorageTest(event) {
    const that = this
    wx.removeStorage({
      key: 'name',
      success(res) {
        that.getStorageTest()
      }
    })
  }
复制代码

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户没法读取到 B 用户的数据；不一样小程序之间也没法互相读写数据。

网络请求

小程序支持普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通讯（wx.connectSocket）。

具体使用：

wx.request({
      url: 'https://www.wanandroid.com/banner/json',
      success (res) {
        console.log(res.data.data)
        that.setData({
          bannerList: res.data.data
        })
      }
    })
复制代码

调用Native方法

小程序提供不少设备相关API，如日历、联系人、蓝牙、电量、扫码等。

使用以下：

wx.scanCode({
      onlyFromCamera: true,
      success(res) {
        console.log(res)
      },
      fail(res) {
        console.log(res)
      }
    })
复制代码

5、自定义组件

在现有官方组件没法知足咱们开发需求的时候，小程序也支持自定义组件。

组件模板

组件模板和页面相似，也是包含 xxx.js、xxx.wxml、xxx.wxss、xxx.json

建立一个button组件

配置组件，testbutton.json

{
  "component" : true
}
复制代码

绘制界面和样式

testbutton.wxml

<view class="test-button" bindtap="onClick">
  {{content}}
</view>
复制代码

testbutton.wxss

.test-button {
  width: 100%;
  height: 100rpx;
  background-color: burlywood;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; 
  color: cornflowerblue;
}
复制代码

构造组件

Component 构造器能够指定组件的属性、数据、方法等，具体使用能够参考 Component 构造器。

testbutton.js

Component({
  //声明属性
  properties:{
    content:{
      type: String,
      value: 'test'
    }
    
  },
  methods: {
    onClick: function() {
      console.log('test button onclick')
      var myEventDetail = {
        toastContent: 'This is a test-button'
      }
      var myEventOption = {}
      //声明事件，组件间传递数据
      this.triggerEvent('onClick', myEventDetail, myEventOption)
    }
  }

})
复制代码

使用自定义组件

使用的界面须要经过 usingComponents 引用该组件

{
  "usingComponents": {   
    "Test-Button": "/component/testbutton/testbutton"
  },
  "navigationBarTitleText": "项目"
}
复制代码

界面中直接使用该标签

<Test-Button content="This is a test-button" bindonClick="onClick"></Test-Button>
复制代码

点击后弹出一个toast

onClick(event) { 
    console.log(event)   
    wx.showToast({
      title: event.detail.toastContent,
      duration: 2000
    })
  }
复制代码

6、博客阅读demo开发

经过开发一个简单的demo，能够对以上的内容有更直观的了解。

玩Android API：www.wanandroid.com/blog/show/2

tab主界面，展现最近博客列表

2. 点击浏览具体文章

根据做者，展现文章列表

demo地址

参考：

官方文档

微信小程序入门教程之一：初次上手

一个漂亮玩安卓小程序版本wanandroid-mini