微信小程序

什麼是微信小程序

首先他不是h5頁面,他更像是個app，可是原聲hybird模式都會佔用咱們的手機空間，能夠直接放到微信裏運行，跨平臺，支持離線緩存，但開發體驗很好，缺點，不適合作邏輯複雜的，頁面多的等等。相似於vue單頁開發

具體請查看微信公衆平臺

萬事開頭難

1. 申請AppId 具體參見微信公衆平臺
2. 下載小程序，
3. 建立項目

• 編輯區 - 模擬界面
• 目錄結構區
• 調試 - source,storage,...

搭建結構

app配置文件

• app.json 全局配置文件，能夠配置小程序入口，標題，tabbar配置導航，每一個子文件夾下的json至關於app.jsonde window項，不設置，默認爲app.json內容，設置的話可覆蓋
• app.wxss css樣式 文件引入css, @import ,flex佈局@import "list-tmpl/list-tmpl.wxss";
• app.js 引入 js require var list = require('../../data/data.js');
• wxml 引入<import src='list-tmpl/list-tmpl.wxml' />
• images文件夾
• data文件夾

路徑 一概相對路徑

單位 rpx

1rpx在iopone6下 == 2px

寬度 750饒平縣= 100%

高度通常採用rpx

線條1px

事件

• bindtab冒泡
• catchtab非冒泡
• bindchange
• bindinput

跳轉三種方式

• navigateTo跳轉到，有返回鍵
• switchTab 若是有tabbar只能用switchTab方法切換
• redirectTo 重定向沒有返回鍵
• navigateBack

組件

• swiper組件 一般結合下拉刷新 須要配置window <swiper autoplay="{{true}}" interval='2000' indicator-dots='{{true}}' circular='{{true}}' vertical='{{true}}' style='height:400rpx'> <swiper-item wx:for="{{imgs}}" wx:for-item="num">
• <picker mode="time" start="10:00" end="18:00" bindchange="timerEvent">
• <picker mode="date" start="2015-04-11" end="2017-08-05" value=" {{time}}" bindchange="dateEvent">
• <picker range="{{array}}" value="{{time}}" bindchange="selector">
• <picker-view style="width:100%;height:300px" indicator-style="height:50px" bindchange="picks"> <picker-view-column style="line-height:50px"> <view wx:for="{{foods}}">{{item}}</view> </picker-view-column>
• <progress percent="20" active show-info></progress>
• <switch type="switch" checked="{{true}}" />
• <view wx:for="{{arrs}}"> <icon type="{{item}}" size="30"></icon>{{item}} </view>arrs有不少種類型

播放音樂

wx.playBackgroundAudio({
      dataUrl: 'http://isure.stream.qqmusic.qq.com/C4000032ZOkm0LBgHW.m4a?vkey=88FEC5880C346CE5D6F0C5E6A3DAA71ED4EB67057F6B17250168EE7E9BC7D6D0928632F365D3582E587273A0B2305466C54B963BC4D54298&guid=8491420912&uin=0&fromtag=66',
      success: (res) =>{
        app.flag = false;
        this.setData({
          flag:false
        })
      }
});

onLoad: function (options) {
    //防止用戶使用自帶播放，致使圖片顯示不一樣步
    wx.onBackgroundAudioPlay(()=>{
      app.flag = false;
      this.setData({
        flag: false
      })
    })
    wx.onBackgroundAudioPause(() => {
      app.flag = true;
      this.setData({
        flag: true
      })
    })
  },
  
  //flag要設置全局的
  //數據公用
  //var app = getApp();能夠獲取app裏面的數據
複製代碼

模版使用

聲明：<template name="list">
引入： <template is="list" data="{{...item}}" ></template>
複製代碼

還有不少組件和APi能夠照這文檔開發就能夠啦