它提供了友好的视图层描述语言,它提供了投机的视图层描述语言公海赌船网址

微信小程序在无论在效能、文档及有关支撑地点,都是优于前面二种微信账号类型,它提供了成百上千原生程序才有的接口,使得我们的小程序在重重地点突破H5页面使用的界定,更加切近原生程序的功力,由此微信小程序有所很大的前景想象力。它提供了自己的视图层描述语言
WXML 和 WXSS,以及基于 JavaScript
的逻辑层框架,并在视图层与逻辑层间提供了多少传输和事件系统,可以让开发者可以便宜的聚焦于数据与逻辑上。

微信小程序在无论在职能、文档及相关支撑地点,都是优化前边两种微信账号类型,它提供了广大原生程序才有的接口,使得我们的小程序在众多方面突破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

1、小程序的目录结构

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

公海赌船网址 4

其间项目级其余的文件包括 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 中宣示的体制规则。
一个小程序主体部分由五个公文组成,必须放在项目标根目录。

公海赌船网址 5

微信小程序中的每一个页面的【路径+页面名】都急需写在 app.json 的 pages
中,且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路线下同名的五个不等后缀文件的咬合,如:index.js、index.wxml、index.wxss、index.json。.js
后缀的文件是本子文件,.json
后缀的文本是布置文件,.wxss
后缀的是样式表文件,.wxml
后缀的文书是页面结构文件。
index.json
是页面的配备文件:页面的安排文件是非必要的。当有页面的部署文件时,配置项在该页面会覆盖
app.json 的 window
中一律的布局项。如若没有点名的页面配置文件,则在该页面一向运用 app.json
中的默认配置。

公海赌船网址 6

逻辑层(App Service)
小程序支付框架的逻辑层是由JavaScript编写。
逻辑层将数据举行拍卖后发送给视图层,同时接受视图层的轩然大波反映。 在
JavaScript 的底蕴上,大家做了有些修改,以利于地开发小程序。
增加
App

Page
方法,进行程序和页面的注册。
日增 getApp 和 getCurrentPages 方法,分别用来收获 App
实例和当下页面栈。
提供丰裕的
API,如微信用户数量,扫一扫,支付等微信特有力量。
各种页面有单独的作用域,并提供模块化能力。
由于框架并非运行在浏览器中,所以 JavaScript 在 web
中有的能力都爱莫能助选择,如 document,window 等。
开发者写的所有代码最后将会打包成一份
JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似
瑟维斯(Service)(Service)Worker,所以逻辑层也号称 App 瑟维斯。

视图层
框架的视图层由 WXML 与 WXSS 编写,由组件来拓展体现。
将逻辑层的数码影响成视图,同时将视图层的风波发送给逻辑层。
WXML(WeiXin 马克(Mark)up language)用于描述页面的布局。
WXSS(WeiXin Style Sheet)用于描述页面的体制。
组件(Component)是视图的为主构成单元。

基本功零部件
框架为开发者提供了一层层基础零部件,开发者可以通过结合这一个基础零部件进行高效支付。
哪些是组件:
零件是视图层的着力构成单元。
零件自带一些功力与微信风格的样式。
一个零部件平常包括起先标签
和竣工标签
,属性
用来修饰那些组件,内容
在六个标签之内。

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

留意:所有组件与特性都是小写,以连字符-连接

API

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

说明:

wx.on 起先的 API 是监听某个事件暴发的API接口,接受一个 CALLBACK
函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
如未特殊约定,其他 API 接口都承受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接过接口调用结果。
参数名 类型 必填 说明
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.seekBackground奥迪o 控制音乐播放进度
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 打开卡券

逻辑层(App Service)

小程序支付框架的逻辑层是由JavaScript编写。

逻辑层将数据开展拍卖后发送给视图层,同时接受视图层的轩然大波上报。 在
JavaScript 的功底上,我们做了部分修改,以方便地付出小程序。

  • 增加 App 和 Page 方法,举行程序和页面的注册。
  • 充实 getApp 和 getCurrentPages 方法,分别用来赢得 App
    实例和眼前页面栈。
  • 提供丰裕的 API,如微信用户数量,扫一扫,支付等微信特有力量。
  • 各样页面有单独的作用域,并提供模块化能力。
  • 出于框架并非运行在浏览器中,所以 JavaScript 在 web
    中部分能力都无法利用,如 document,window 等。
  • 开发者写的拥有代码最后将会打包成一份
    JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似
    ServiceWorker,所以逻辑层也称之为 App Service(Service)。

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

  }

视图层

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

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

WXML(WeiXin 马克(Mark)up 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.playBackground奥迪o 播放音乐
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();
          }
        })

      }

 

相关文章