小程序入门(1)

基本知识

1、三要素

wxml , wxss , js 分别对应H5开发中的 html,css,js；另外多一个小程序特有的app.json文件，这仅是一个配置文件。每个页面都是由这四种文件组成

• 1.1、 WXML 模板
  1、常用的标签：view , text , button , image , form , input 等，更多组件
  2、数据绑定：{{...}}

 <text class="{{'share-price-text ' + (gains < 0 ? 'share-loss' : 'share-gain')}}">{{price}}</text>

3、DOM控制：wx:if 更多控制

<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>

4、事件绑定 更多事件

<button bindtap="clickMe">点击我</button>

• 1.2、 WXSS
  1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼。且仅支持部分css。支持的CSS情况
  2、写法上跟css一样
  3、内联样式：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。（个人认为动态添加class还好些，尽量不用内联样式）

<view style="color:{{color}};" />

4、class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

• 1.3、JS
  1、分为全局app.js (名字固定，不能改)和各页面page.js（名字随意，但要和全局app.json中pages的配置一致）
  2、处理事件

// page.js写法
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })     // 设置状态数据，供wxml中使用
  }
})
// app.js写法
App({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

3、app.js

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }，
 globalData:{}
})

4、page.js

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

5、微信原生API(均已wx开头)

// 1、网络类，如：
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})
// 2、数据存储类（缓存类，类似localStorage。每个方法都有同步和异步两种调用形式，本地数据存储的大小限制为 10MB）
// 异步调用
wx.setStorage({
  key:"key",
  data:"value"
})
// 同步调用
try {
    wx.setStorageSync('key', 'value')     
} catch (e) {    
}

wx.getStorage({
  key: 'key',
  success: function(res) {
      console.log(res.data)
  } 
})

try {
  var value = wx.getStorageSync('key')
  if (value) {
      // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

wx.removeStorage({
  key: 'key',
  success: function(res) {
    console.log(res.data)
  } 
})

try {
  wx.removeStorageSync('key')
} catch (e) {
  // Do something when catch error
}

wx.clearStorage()

try {
    wx.clearStorageSync()
} catch(e) {
  // Do something when catch error
}
// 3、界面类(显示一些界面组件，如toast,loading,modal等，有3个特殊的，wx.redirectTo & wx.navigateTo & wx.switchTab)
// toast
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})
// wx.navigateTo,保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
wx.navigateTo({
  url: 'test?id=1'
})
// wx.redirectTo,关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
  url: 'test?id=1'
})
// wx.switchTab,跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})
// 4、媒体类（上传、预览图片；录音、播放语音等）
// 5、文件类（保存文件等）
// 6、位置类
wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})
// 7、设备类(获取网络状态、系统信息等)
wx.getNetworkType({
  success: function(res) {
    // 返回网络类型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    var networkType = res.networkType
  }
})
// 8、WXML查询节点 APIz(类似document.querySelector())
Page({
  getFields: function(){
    wx.createSelectorQuery().select('#the-id').fields({
      dataset: true,
      size: true,
      scrollOffset: true,
      properties: ['scrollX', 'scrollY']
    }, function(res){
      res.dataset    // 节点的dataset
      res.width      // 节点的宽度
      res.height     // 节点的高度
      res.scrollLeft // 节点的水平滚动位置
      res.scrollTop  // 节点的竖直滚动位置
      res.scrollX    // 节点 scroll-x 属性的当前值
      res.scrollY    // 节点 scroll-y 属性的当前值
    }).exec()
  }
})