微信小程序入门教程

3,371 阅读7分钟

一、基础介绍

小程序是什么

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

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

开发准备

  1. 微信公众平台注册,申请一个AppId。

  2. 下载小程序开发工具,微信开发者工具

创建一个项目

image

image

调试运行项目

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

image

二、小程序项目结构

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

image

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

文件必需作用
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.jsonwindow 中相同的配置项。

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

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

三、页面

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页面主要有以下两个区别:

  1. 标签名字不太一样,微信小程序提供了丰富的组件供开发者使用,所以不需要使用类似 div、p、span的基础标签。
  2. 多了一些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',
    })
  }

四、API 使用

存储

每个微信小程序都有自己的本地缓存,可以通过 wx.setStorage/wx.setStorageSyncwx.getStorage/wx.getStorageSyncwx.clearStorage/wx.clearStorageSyncwx.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

image

创建一个button组件

  1. 配置组件,testbutton.json
{
  "component" : true
}
  1. 绘制界面和样式

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;
}

  1. 构造组件

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

})

  1. 使用自定义组件

使用的界面需要通过 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
    })
  }

image

六、博客阅读demo开发

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

玩Android 开放API

  1. tab主界面,展示最近博客列表

    image

  2. 点击浏览具体文章

    image

  3. 根据作者,展示文章列表

    image

代码demo地址

参考:

  1. 官方文档
  2. 微信小程序入门教程之一:初次上手
  3. 一个漂亮玩安卓小程序版本wanandroid-mini

另外推荐两个小程序入门不错的文章

  1. 微信小程序开发学习 juejin.cn/post/695733…
  2. 手把手教你写微信小程序 juejin.cn/post/688626…

好了,我是i小灰 本教程就到这里。