无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁 > 小程序資訊 > 小程序常見問題
微信小程序開發(fā)新手實戰(zhàn)教程
時間：2016-10-20 17:47:00

創(chuàng)建快捷項目

app.js是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數(shù)據(jù)。 
app.json是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認標(biāo)題。注意該文件不可添加任何注釋。 
app.wxss是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調(diào)用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  },
  onShow:function() {
    console.log("show");
  },
  onHide:function() {
    console.log("hide");
  }
})

注意必須在 app.js 中注冊App() ，不能注冊多個。 
onLaunch：程序初始化執(zhí)行，且只執(zhí)行一次。 
onShow:程序啟動，或從程序后臺進入前臺時執(zhí)行。 
onHide:程序從前臺進入后臺時執(zhí)行。 
可以添加任意函數(shù)到OBJECT中，使用this訪問。

底部導(dǎo)航 
添加images目錄，放入圖片資源并添加主程序頁面 

添加底部導(dǎo)航tabBar

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/main/main"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#dddddd",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{
    "color":"#000",
    "selectedColor":"#48c33c",
    "borderStyle":"block",
    "backgroundColor":"#ffffff",
    "list":[{
      "pagePath":"pages/index/index",
      "iconPath":"images/footer/index.png",
      "selectedIconPath":"images/footer/indexS.png",
      "text":"首頁"
    },
    {
      "pagePath":"pages/logs/logs",
      "iconPath":"images/footer/logs.png",
      "selectedIconPath":"images/footer/logsS.png",
      "text":"日志"
    },
    {
      "pagePath":"pages/main/main",
      "iconPath":"images/footer/main.png",
      "selectedIconPath":"images/footer/mainS.png",
      "text":"主程序"
    }
    ]
  }
}

color：文字默認顏色 
selectedColor：文字選中顏色 
borderStyle：上邊框顏色（只支持black/white） 
backgroundColor：背景色 
list：菜單列表

list屬性 
pagePath：頁面路徑（需要在pages中初始化） 
iconPath：圖片路徑，大小限制40kb 
selectedIconPath：選中樣式圖片路徑，大小限制40kb 
text：按鈕文字

數(shù)據(jù)綁定

main.js

Page({
  data:{
    text:"這是一個頁面"
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關(guān)閉
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

main.wxml

<view>
    <text>{{text}}</text>
</view>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

view組件 
flex-direction： row：橫向排列；column：縱向排列 
justify-content：flex-start：左對齊； flex-end：右對齊；center：居中；space-between：兩端分散對齊；space-around：居中分散對齊 
align-items：flex-start：垂直頂部；flex-end：垂直底部；center：垂直居中

輪播

    <swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >
        <swiper-item>
            <view style="background: red; height: 150px"></view>
        </swiper-item>
        <swiper-item>
            <view style="background: green; height: 150px"></view>
        </swiper-item>
            <swiper-item>
            <view style="background: blue; height: 150px"></view>
        </swiper-item>    
    </swiper>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

屬性名 類型 默認值 說明 
indicator-dots Boolean false 是否顯示面板指示點 
autoplay Boolean false 是否自動切換 
current Number 0 當(dāng)前所在頁面的 index 
interval Number 5000 自動切換時間間隔 
duration Number 1000 滑動動畫時長 
bindchange EventHandle current 改變時會觸發(fā) change 事件，event.detail = {current: current} 
注意：其中只可放置組件，其他節(jié)點會被自動刪除。 
僅可放置在組件中，寬高自動設(shè)置為100%。

獲取輪播改變事件

listenSwiper:function(e) {
    console.log(e)
},
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

值

Object {target: Object, currentTarget: Object, type: "change", timeStamp: 35345, detail: Object}
currentTarget
:
Object
detail
:
Object
target
:
Object
timeStamp
:
35345
type
:
"change"
__proto__
:
Object
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

圖標(biāo) icon 

type 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear 
size 默認23px 
color 同css的color

<!--成功圖標(biāo)-->

    <icon type="success" size="40"/>

    <!--安全成功標(biāo)志圖標(biāo)-->

    <icon type="safe_success" size="40"/>

    <!--提示信息圖標(biāo)-->

    <icon type="info" size="40"/>

    <!--帶圓的信息提示圖標(biāo)-->

    <icon type="info_circle" size="40"/>

    <!--不帶圓的成功圖標(biāo)-->

    <icon type="success_no_circle" size="40"/>

    <!--帶圓的成功圖標(biāo)-->

    <icon type="success_circle" size="40"/>

    <!--警告圖標(biāo)-->

    <icon type="warn" size="40"/>

    <!--帶圓的等待圖標(biāo)-->

    <icon type="waiting_circle" size="40"/>

    <!--等待圖標(biāo)-->

    <icon type="waiting" size="40"/>

    <!--下載圖標(biāo)-->

    <icon type="download" size="40"/>

    <!--取消圖標(biāo)-->

    <icon type="cancel" size="40"/>

    <!--清除圖標(biāo)-->

    <icon type="clear" size="40"/>

    <!--改變顏色的success-->

    <icon type="success" size="40" color="red"/>

進度條 
percent Float 無 百分比0~100 
show-info Boolean false 在進度條右側(cè)顯示百分比 
stroke-width Number 6 進度條線的寬度，單位px 
color Color #09BB07 進度條顏色 
active Boolean false 進度條從左往右的動畫

<progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/>

按鈕 button

    <button type="defaule" bindtap="clickButton">Defalut</button>

    <!--原始顏色，不可點擊狀態(tài)， 正在加載狀態(tài)-->

    <button type="primary" disabled="true" loading="true">Primary</button>

    <button type="warn">warn</button>

注：button-hover 默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

按鈕點擊事件

  clickButton: function(e) {

    console.log(e);

  },

CHECKBOX

    <!--checkbox-group是checkbox的組，使用bindchange，監(jiān)聽數(shù)據(jù)選中和取消-->

    <checkbox-group bindchange="listenCheckboxChange">

        <label style="display: flex;"  wx:for-items="{{items}}">

            <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}

        </label>

    </checkbox-group>

綁定事件 
綁定數(shù)據(jù)

items: [

        {

          name: 'S', 

          value: 'S', 

          checked: 'true'

        },

        {

          name: 'O', 

          value: 'O'

        },

        {

          name: 'N', 

          value: 'N'

        },

        {

          name: 'G', 

          value: 'G'

        },

        {

          name: 'SONG', 

          value: 'SONG'

        }

    ]

綁定監(jiān)聽事件

  listenCheckboxChange:function(e) {

      console.log(e);

  },

至此頁面

源代碼（Git）：https://github.com/yz-mengxiangsong/wechatDemo.git

微信小程序簡易全攻略《二》設(shè)置頁面標(biāo)題與底部導(dǎo)航
IOS開發(fā)者試水：微信小程序開發(fā)教程-從零開始（3）
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358