微信小程序学习

一、基础介绍

小程序是什么

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

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

开发准备

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

创建一个项目

创建小程序1.png

创建小程序2.png

调试运行项目

小程序支持实时预览，代码修改后，左边预览窗口就可以直接看到修改后的效果。
也可以点击预览按钮，通过微信的扫一扫在手机上体验。

小程序调试1.png

二、小程序项目结构

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

小程序结构1.png

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

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

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

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

注册小程序

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

// 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"
}

三、页面

WXML 模板

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


  
    
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}

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

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

JS交互逻辑

小程序为组件提供了很多交互属性，且使用非常简单：

//xxx.wxml
{{ msg }}


//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',
    })
  }

四、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)
      }
    })

五、自定义组件

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

组件模板

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

自定义组件1.png

创建一个button组件

配置组件，testbutton.json

{
  "component" : true
}

绘制界面和样式

testbutton.wxml


  {{content}}

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": "项目"
}

界面中直接使用该标签

点击后弹出一个toast

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

自定义组件2.png

六、博客阅读demo开发

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

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

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

首页.png
点击浏览具体文章

浏览文章.png

根据作者，展示文章列表

文章.png

demo地址

参考：

官方文档

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

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

微信小程序学习

一、基础介绍

小程序是什么

开发准备

创建一个项目

调试运行项目

二、小程序项目结构

注册小程序

全局配置

注册页面

页面配置

三、页面

WXML 模板

JS交互逻辑

页面跳转

四、API 使用

存储

网络请求

调用Native方法

五、自定义组件

组件模板

创建一个button组件

六、博客阅读demo开发

你可能感兴趣的:(微信小程序学习)