微信小程序开发基础知识

  微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力。它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。
 
  1、小程序的目录结构
 
  小程序的目录结构如下所示。
 
小程序目录结构
 
  其中项目级别的的文件包括 app.js、app.json、app.wxss 这三个。其中.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。
 
  页面级别可以包含很多个页面,如index,detail等页面,每个页面都包含.js,.json,.wxml,.wxss这些文件,其中.wxml为页面视图文件,是自定义标签的HTML页面。
 
  app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,可以调用框架提供的丰富的 API。
 
  app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。
 
  app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
 
  一个小程序主体部分由三个文件组成,必须放在项目的根目录。
 
小程序主体
 
  微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。
 
  每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。
 
  index.json 是页面的配置文件:页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json 中的默认配置。
 
小程序页面组成部分
 
  逻辑层(App Service)
 
  小程序开发框架的逻辑层是由Java编写。
 
  逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。在 Java 的基础上,我们做了一些修改,以方便地开发小程序。
 
  增加 App和 Page方法,进行程序和页面的注册。
 
  增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
 
  提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
 
  每个页面有独立的作用域,并提供模块化能力。
 
  由于框架并非运行在浏览器中,所以 Java 在 web 中一些能力都无法使用,如 document,window 等。
 
  开发者写的所有代码最终将会打包成一份 Java,并在小程序启动的时候运行,直到小程序销毁。类似 ServiceWorker,所以逻辑层也称之为 App Service。
 
  视图层
 
  框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
 
  将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
 
  WXML(WeiXin Markup language)用于描述页面的结构。
 
  WXSS(WeiXin Style Sheet)用于描述页面的样式。
 
  组件(Component)是视图的基本组成单元。
 
  基础组件
 
  框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。
 
  什么是组件:
 
  组件是视图层的基本组成单元。
 
  组件自带一些功能与微信风格的样式。
 
  一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
 
  Content goes here ...
 
  注意:所有组件与属性都是小写,以连字符-连接
 
  API
 
  框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
 
  说明:
 
  wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
 
  如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。
 
  OBJECT中可以指定success, fail, complete来接收接口调用结果。
 
接口调用图示
 
  2、小程序接口功能列表
 
  框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
 
  1)网络 API 列表:
 
  wx.request 发起网络请求wx.uploadFile 上传文件wx.downloadFile 下载文件wx.connectSocket 创建 WebSocket 连接wx.onSocketOpen 监听 WebSocket 打开wx.onSocketError 监听 WebSocket 错误wx.sendSocketMessage 发送 WebSocket 消息wx.onSocketMessage 接受 WebSocket 消息wx.closeSocket 关闭 WebSocket 连接wx.onSocketClose 监听 WebSocket 关闭
 
  2)媒体 API 列表:
 
  wx.chooseImage 从相册选择图片,或者拍照wx.previewImage 预览图片wx.startRecord 开始录音wx.stopRecord 结束录音wx.playVoice 播放语音wx.pauseVoice 暂停播放语音wx.stopVoice 结束播放语音wx.getBackgroundAudioPlayerState 获取音乐播放状态wx.playBackgroundAudio 播放音乐wx.pauseBackgroundAudio 暂停播放音乐wx.seekBackgroundAudio 控制音乐播放进度wx.stopBackgroundAudio 停止播放音乐wx.onBackgroundAudioPlay 监听音乐开始播放wx.onBackgroundAudioPause 监听音乐暂停wx.onBackgroundAudioStop 监听音乐结束wx.chooseVideo 从相册选择视频,或者拍摄
 
  3)文件 API 列表:
 
  wx.saveFile 保存文件wx.getSavedFileList 获取已保存的文件列表wx.getSavedFileInfo 获取已保存的文件信息wx.removeSavedFile 删除已保存的文件信息wx.openDocument 打开文件
 
  4)数据 API 列表:
 
  wx.getStorage 获取本地数据缓存wx.getStorageSync 获取本地数据缓存wx.setStorage 设置本地数据缓存wx.setStorageSync 设置本地数据缓存wx.getStorageInfo 获取本地缓存的相关信息wx.getStorageInfoSync 获取本地缓存的相关信息wx.removeStorage 删除本地缓存内容wx.removeStorageSync 删除本地缓存内容wx.clearStorage 清理本地数据缓存wx.clearStorageSync 清理本地数据缓存
 
  5)位置 API 列表:
 
  wx.getLocation 获取当前位置wx.chooseLocation 打开地图选择位置wx.openLocation 打开内置地图wx.createMapContext 地图组件控制
 
  6)设备 API 列表:
 
  wx.getNetworkType 获取网络类型wx.onNetworkStatusChange 监听网络状态变化wx.getSystemInfo 获取系统信息wx.getSystemInfoSync 获取系统信息wx.onAccelerometerChange 监听加速度数据wx.startAccelerometer 开始监听加速度数据wx.stopAccelerometer 停止监听加速度数据wx.onCompassChange 监听罗盘数据wx.startCompass 开始监听罗盘数据wx.stopCompass 停止监听罗盘数据wx.setClipboardData 设置剪贴板内容wx.getClipboardData 获取剪贴板内容wx.makePhoneCall 拨打电话wx.scanCode 扫码
 
  7)界面 API 列表:
 
  wx.showToast 显示提示框wx.showLoading 显示加载提示框wx.hideToast 隐藏提示框wx.hideLoading 隐藏提示框wx.showModal 显示模态弹窗wx.showActionSheet 显示菜单列表wx.setNavigationBarTitle 设置当前页面标题wx.showNavigationBarLoading 显示导航条加载动画wx.hideNavigationBarLoading 隐藏导航条加载动画wx.navigateTo 新窗口打开页面wx.redirectTo 原窗口打开页面wx.switchTab 切换到 tabbar 页面wx.navigateBack 退回上一个页面wx.createAnimation 动画wx.createContext 创建绘图上下文wx.drawCanvas 绘图wx.stopPullDownRefresh 停止下拉刷新动画
 
  8)WXML节点信息 API 列表:
 
  wx.createSelectorQuery 创建查询请求selectorQuery.select 根据选择器选择单个节点selectorQuery.selectAll 根据选择器选择全部节点selectorQuery.selectViewport 选择显示区域nodesRef.boundingClientRect 获取布局位置和尺寸nodesRef.scrollOffset 获取滚动位置nodesRef.fields 获取任意字段selectorQuery.exec 执行查询请求
 
  9)开放接口:
 
  wx.login 登录wx.getUserInfo 获取用户信息wx.chooseAddress 获取用户收货地址wx.requestPayment 发起微信支付wx.addCard 添加卡券wx.openCard 打开卡券
 
  3、相关处理代码
 
  1)注册程序处理代码
 
  App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, : function(msg) { console.log(msg) }, globalData: 'I am global data' })
 
  2)注册页面处理代码
 
  //index.jsPage({ data: { text: "This is page data." }, : function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down. }, onReachBottom: function() { // Do something when page reach bottom. }, onShareAppMessage: function () { // return custom share data when user share. }, onPageScroll: function() { // Do something when page scroll }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) }, customData: { hi: 'MINA' } })
 
  3)JS函数模块化
 
  // common.jsfunction sayHello(name) { console.log(`Hello ${name} !`) }function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye
 
  在需要使用这些模块的文件中,使用 require(path) 将公共代码引入
 
  var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } })
 
  4)网络数据请求处理代码
 
  //点击搜索按钮调用的函数 search:function(e){ var that = this; //数据加载完成之前,显示加载中提示框 wx.showToast({ title: '加载中。。。', icon: 'loading', duration: 10000 }); //发起请求,注意 wx.request发起的是 HTTPS 请求 wx.request({ url: url + "?city=" + that.data.inputValue + "&key=" + apiKey, data: {}, header: { 'content-type': 'application/json' }, success: function(res) { var data = res.data; //将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值 that.setData({ restation: data.result, condition: false }); //数据加载成功后隐藏加载中弹框 wx.hideToast(); } }) }

相关阅读:

来源:兰州小程序开发公(微信:16609313136)(QQ:2921822968),欢迎分享,转载请注明出处!