微信小程序于管以效力、文档及有关支持地方,都是优于前面几种植微信账号类型,它提供了成千上万原生程序才有的接口,使得我们的稍程序在很多点突破H5页面下的克,更加切近原生程序的效果,因此微信小程序有所非常要命之前景想象力。它提供了好之视图层描述语言
WXML 和 WXSS,以及根据 JavaScript
的逻辑层框架,并于视图层与逻辑层间提供了数码传和波系,可以叫开发者可以方便的聚焦于数据与逻辑上。

1、小序的目录结构

些微序的目结构如下所示。

图片 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 中扬言的体规则。

一个不怎么程序主体有由于三只文件组成,必须在项目之绝望目录。

图片 2

 

 微信小程序中的诸一个页面的【路径+页面名】都得写于 app.json 的 pages
中,且 pages 中的首先独页面是稍稍序的首页。

每一个小程序页面举凡由与路线下同名的季单不同后缀文件之组合,如:index.js、index.wxml、index.wxss、index.json。.js后缀的公文是本子文件,.json后缀的文书是布局文件,.wxss后缀的凡样式表文件,.wxml后缀的文件是页面结构文件。

index.json
是页面的配备文件:页面的布文件是免必不可少之。当有页面的布局文件时,配置起于该页面会覆盖
app.json 的 window
中平等之配备起。如果无点名的页面配置文件,则于拖欠页面一直以 app.json
中之默认配置。

 图片 3

逻辑层(App Service)

稍加程序开发框架的逻辑层是出于JavaScript编写。

逻辑层将数据开展处理后发送给视图层,同时接受视图层的轩然大波反映。 在
JavaScript 的功底及,我们召开了片改动,以有益地出小序。

  • 增加 App 和 Page 方法,进行次与页面的注册。
  • 加 getApp 和 getCurrentPages 方法,分别用来收获 App
    实例和时页面栈。
  • 提供丰富的 API,如微信用户数量,扫一扫,支付当微信特有能力。
  • 每个页面有独立的作用域,并提供模块化能力。
  • 由于框架并非运行在浏览器被,所以 JavaScript 在 web
    中有力量都无法用,如 document,window 等。
  • 开发者写的富有代码最终以会见打包改成一份
    JavaScript,并以聊序启动的时运行,直到小序销毁。类似
    ServiceWorker,所以逻辑层也称 App Service。

视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来开展展示。

将逻辑层的数量影响成视图,同时以张图层的风波发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的体。

组件(Component)是视图的为主成单元。

 

基本功零部件

框架为开发者提供了平多级基础零部件,开发者可以经做这些基础零部件进行快捷开。

哟是组件:

  • 组件是视图层的为主成单元。
  • 组件自带一些效益以及微信风格的样式。
  • 一个零件通常包括开始标签结束标签属性因而来修饰是组件,内容每当少数只标签内。

    <tagname property="value">
      Content goes here ...
    </tagename>
    

    只顾:所有组件和特性都是有点写,以连字符-连接

API

框架提供丰富的微信原生API,可以方便之调整起微信提供的能力,如获得用户信息,本地存储,支付功能等。

说明:

  • wx.on 开头的 API 是监听某个事件时有发生的API接口,接受一个 CALLBACK
    函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
  • 一旦不特殊约定,其他 API 接口都接受一个OBJECT作为参数。
  • OBJECT中得指定successfailcomplete来接收接口调用结果。
参数名 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

 

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.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

2)注册页面处理代码

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: 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.js
function 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();
          }
        })

      }

 

相关文章

网站地图xml地图