它提供了本身的视图层描述语言

微信小程序在无论在效劳、文书档案及有关支撑地点,都是特别巨惠前边二种微信账号类型,它提供了无数原生程序才有的接口,使得我们的小程序在诸多上面突破H五页面使用的限定,特别类似原生程序的作用,由此微信小程序有所非常大的前景想象力。它提供了上下一心的视图层描述语言
WXML 和 WXSS,以及根据 JavaScript
的逻辑层框架,并在视图层与逻辑层间提供了数码传输和事件系统,能够让开辟者能够便宜的聚集于数据与逻辑上。

一、小程序的目录结构

小程序的目录结构如下所示。

图片 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

 

 微信小程序中的每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 瑟维斯。

视图层

框架的视图层由 WXML 与 WXSS 编写,由组件来进展体现。

将逻辑层的多少影响成视图,同时将视图层的风浪发送给逻辑层。

WXML(WeiXin 马克up language)用于描述页面包车型客车构造。

WXSS(WeiXin Style Sheet)用于描述页面包车型大巴体裁。

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

 

基础零部件

框架为开拓者提供了1层层基础零部件,开荒者可以通过结合这几个基础零部件进行急速支付。

什么样是组件:

  • 零件是视图层的主导组成单元。
  • 组件自带一些意义与微信风格的样式。
  • 三个零件平时包含开始标签结束标签属性用来修饰那个组件,内容在多个标签之内。

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

    小心:全数组件与性格皆以小写,以连字符-连接

API

框架提供丰盛的微信原生API,能够便宜的调起微信提供的技能,如获得用户新闻,本地存款和储蓄,支付功效等。

说明:

  • wx.on 伊始的 API 是监听有个别事件产生的API接口,接受1个 CALLBACK
    函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
  • 如未特殊约定,别的 API 接口都承受3个OBJECT作为参数。
  • OBJECT中得以钦赐successfailcomplete来抽取接口调用结果。
参数名 类型 必填 说明
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

 

二、小程序接口效能列表

框架提供充分的微信原生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.getBackground奥迪(Audi)oPlayerState 获取音乐广播状态
wx.playBackground奥迪o 播放音乐
wx.pauseBackground奥迪o 暂停止播放放音乐
wx.seekBackground奥迪(Audi)o 调整音乐播放进度
wx.stopBackground奥迪(Audi)o 停播音乐
wx.onBackground奥迪(Audi)oPlay 监听音乐开播
wx.onBackground奥迪(Audi)oPause 监听音乐中断
wx.onBackground奥迪(Audi)oStop 监听音乐截止
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 结束下拉刷新动画

 

八)WXML节点信息 API 列表:

wx.createSelectorQuery 创立查询请求
selectorQuery.select 依照选拔器选用单个节点
selectorQuery.selectAll 依照选用器采取任何节点
selectorQuery.selectViewport 选取呈现区域
nodesRef.boundingClientRect 获得布局地方和尺寸
nodesRef.scrollOffset 获取滚动地方
nodesRef.田野同志s 获得狂妄字段
selectorQuery.exec 试行查询请求

 

玖)开放接口:

wx.login 登录
wx.getUserInfo 获取用户音讯
wx.chooseAddress 获取用户收货地址
wx.requestPayment 发起微信支付
wx.addCard 增添卡券
wx.open卡德 张开卡券

 

叁、相关管理代码

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

三)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();
          }
        })

      }

 

相关文章