微信小程序基础

微信官网文档

目录结构
app.js        
app.json    
app.wxss  

视图层 View
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。WXML 语法参考
WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 语法参考
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。

初始渲染缓存（支持的组件、内置组件）







组件
cover-image：覆盖在原生组件之上的图片视图
cover-view：覆盖在原生组件之上的文本视图
match-media：media query 匹配检测节点
movable-area：movable-view的可移动区域
movable-view：可移动的视图容器，在页面中可以拖拽滑动
page-container：页面容器
scroll-view：可滚动视图区域
share-element：共享元素
swiper：滑块视图容器
swiper-item：仅可放置在swiper组件中，宽高自动设置为100%
view：视图容器

框架接口 /页面 /Page

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onShow: function() {
    // Do something when page show.
  },
  onReady: function() {
    // Do something when page ready.
  },
  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
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

框架接口 /自定义组件 /Component

视图容器

表单组件

网络请求

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  method:"GET",
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  },
  fail (res) {
    console.log(res.data)
  }
})

数据缓存

支付
*
设备 /扫码 / wx.scanCode
*
生成二维码
需要 weapp-qrcode.js 文件，直接下载，保存到 utils 文件夹。

import QRCode from '../../utils/weapp-qrcode.js'

// 打开二维码
openqrcode() {
    let that = this;
    let query = {
        real_name: this.data.real_name,
        identity_card: this.data.identity_card,
        sex: this.data.sex
    }
    new QRCode('myQrcode', {
        text: JSON.stringify(query),
        width: 250,
        height: 250,
        padding: 6, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
            console.log(res.path)
        }
    })
}

*
*
*
*
*
*
*
*
*
*