創(chuàng)建項目

1.微信公眾平臺  注冊豁辉，登錄下載開發(fā)工具
2.登錄開發(fā)工具假夺，新建項目（最好是空的文件目錄荐绝，項目的appid在微信公眾平臺--小程序--開發(fā)--開發(fā)設(shè)置--開發(fā)者id）
    創(chuàng)建好項目后在里面有一個基本的目錄結(jié)構(gòu)（project.config.json配置文件干旁，這里面如果想運行別人的微信小程序摧扇，需要把appid更改為自己的appid）
    在小程序中只有四種文件（.js(邏輯,實例)  .json(配置) .wxml(頁面結(jié)構(gòu))  .wxss(樣式表)）
3.創(chuàng)建一個實例：
app.js
    app({...})  里面存放的是生命周期
    分為頁面的生命周期和小程序的生命周期

app.json
    {...}   里面是全局 的配置
    
    pages：表示有是個頁面,哪一個在前面就表示是首頁
        里面會有自動創(chuàng)建好的頁面缘滥，或者自己手動創(chuàng)建修改
        內(nèi)部沒有dom元素
            塊級元素：<view></view>
            行內(nèi)元素：<text></text>
        設(shè)置樣式在wxss中設(shè)置可以直接是標簽名申鱼，也可以使用class選擇器進行設(shè)置
        不能使用sass后者less預(yù)處理語言
        小程序是移動端风钻，就需要適配移動端布局英妓，有一個新的單位rpx挽放，寬度一般是750rpx
    window:窗口的配置
        如果設(shè)置這些配置時顏色只支持16進制的
        如果需要設(shè)置導(dǎo)航欄的樣式需要微信版本大于6.6.0才能夠支持
        移動端需要做下拉刷新和上拉加載
        只要是配置頁面的界面顯示
    networkTimeout:網(wǎng)絡(luò)請求的時間（響應(yīng)時間過長時斷掉）
    tabBaer:可以設(shè)置小程序的導(dǎo)航欄（最多5個最少2個，由數(shù)組組成）
        "tabBaer":{
            //設(shè)置樣式蔓纠，邊框顏色及選中的顏色辑畦，定位等
            "list":[
                {
                    "pagepath":"",    //需要設(shè)置的路徑
                    "text":""，     //導(dǎo)航欄的名稱
                    "iconpath":"",   //默認的圖標
                    "selectIconpath":""   //選中下的樣式
                },
                  {
                    "pagepath":"",    //需要設(shè)置的路徑
                    "text":""     //導(dǎo)航欄的名稱
                }
            ]
        }

    注意：局部的配置可以覆蓋全局 的配置 
4.數(shù)據(jù)的傳遞
    對應(yīng)的js文件中如果需要傳遞數(shù)據(jù)需要用到
    在小程序中腿倚，沒有window對象
        page({
            data:{
                name:"123"
            },
            //自定義事件,單純的數(shù)據(jù)綁定類似vue纯出，但是修改數(shù)據(jù)類似于react，使用的是this.setData({name:'32432'})
            changeName(e){
                console.log("事件對象",e)   //事件對象猴誊，事件對象傳遞參數(shù)需要使用的是data-haha="123"
                console.log('456')
            }
        })
    事件分為冒泡事件和非冒泡事件
5.小程序中的指令
    條件渲染：
        <view wx:if="{{age<20}}">青年</view>
        <view wx:else>青年</view>
        <button bindlongtap="add">add</button> 
        add(){
            let age=++this.data.age
            this.setData({age})
        }
    列表渲染：
        wx:for   wx:key     wx:for-item    wx:for-idnex
        <text wx:for="{{info}}">{{item}}{{index}}</text>
        <text wx:for="{{info}}" wx:for-item="haha" wx:for-index="xixi">{{xixi}}{{haha}}</text>
6.組件（當做antd使用）
    hover-class='test'  鼠標按下時的樣式
    swiper   參考官方文檔

    <cover-image src=""></cover-image>這種方式設(shè)置的圖片是自動按比例縮放潦刃，類似背景圖片自適應(yīng)大小進行填充
    picker   //類似于一個彈出層

經(jīng)常使用的api及地圖組件

獲取系統(tǒng)的信息：getSystemInfoSync()
    getSystemInfoSync(){
        let result = wx.getSystemInfoSync()
        console.log(result)
    }
    調(diào)用這個方法即可打印設(shè)備的系統(tǒng)信息
路由：配套一共五個
    1.wx.switchTab()
        跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面懈叹，需要在app.json文件中配置字段乖杠，路徑后面不能跟參數(shù)
        goPage(){
            wx.switchTab({
                url:"要跳轉(zhuǎn)的頁子路徑"，
                fail(err){       //跳轉(zhuǎn)失敗時的錯誤
                    console.log(err)   
                }
            })
        }
    跳轉(zhuǎn)后回不去澄成，無數(shù)據(jù)
    2.wx.reLaunch()
        關(guān)閉所有頁面胧洒，打開到應(yīng)用內(nèi)的某個頁面,可以傳遞參數(shù)畏吓，
        goPage(){
            wx.reLaunch({
                url:"要跳轉(zhuǎn)的路徑?us=123&ps=123"  //傳遞參數(shù)跟在路徑后面，在目標頁面的onlanch生命周期中接收參數(shù)卫漫，不帶反回
            })
        }
    3.wx.redirectTo()
        關(guān)閉當前的頁面菲饼，跳轉(zhuǎn)頁面，不允許跳轉(zhuǎn)tabbar頁面列赎，可以傳遞參數(shù)
        goPage(){
            wx.redirectTo({
                url:"要跳轉(zhuǎn)的路徑?us=123&ps=456"
            })
        }
    4.wx.navigateTo()
        保留當前頁面宏悦，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面包吝。使用 wx.navigateBack 可以返回到原頁面饼煞。小程序中頁面棧最多十層。多的會把前面的覆蓋掉
        goPage(){
            wx.navigateTo({
                url:"要跳轉(zhuǎn)的路徑?us=123&ps456"
            })
        }
        自帶反回'<'
    wx.navigateTo()
        關(guān)閉當前頁面诗越，返回上一頁面或多級頁面砖瞧。可通過 getCurrentPages 獲取當前的頁面棧嚷狞，決定需要返回幾層块促。
界面交互相關(guān)
    1.wx.showToast()
        顯示消息提示框,可以設(shè)置提示內(nèi)容圖標延遲時間
        success(){
            wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1000
            })
        }
    2.wx.showModal()
        顯示模態(tài)框,能夠設(shè)置顯示的提示標題提示的內(nèi)容及取消按鈕，基本的樣式等
        success(){
            wx.showModal({
            title: '提示',
            content: '這是一個模態(tài)彈窗',
            success (res) {
                if (res.confirm) {
                console.log('用戶點擊確定')
                } else if (res.cancel) {
                console.log('用戶點擊取消')
                }
            }
            })
        }
    3.wx.showActionSheet()
        顯示操作菜單,能夠設(shè)置按鈕的文字數(shù)組最大長度為6位床未，顏色及回調(diào)函數(shù)等
        showActionSheet(){
            wx.showActionSheet({
            itemList: ['A', 'B', 'C'],
            success (res) {
                console.log(res.tapIndex)
            },
            fail (res) {
                console.log(res.errMsg)
            }
            })
        } 
    4.下拉刷新的監(jiān)聽
        onPullDownRefresh(){
            console.log('刷新了')
            wx.showLoading({
                title:"數(shù)據(jù)加載ing",
            })
            setTimeout(()=>{
                wx.hideloading()
                wx.stopPullDownRefresh()
            },1000)
        }
    5.導(dǎo)航欄
        wx.setNavigationBarTitle()
        動態(tài)設(shè)置當前頁面的標題
            setNavigationBarTitle(){
                wx.setNavigationBarTitle({
                title: '當前頁面'
                })
            }
地圖組件
    使用場景：打卡竭翠，定位
    1.顯示地圖
    2.獲取使用者所在的位置
    3.將地圖的中心點定位到地圖所在的位置
    4.氣泡
    5.點擊氣泡彈出活動信息
    6.數(shù)據(jù)過濾功能
    7.路線圖
    
    需要使用地圖組件
    <map id="map"
    longitude="113.324520"  //經(jīng)度
    latitude="23.099994"    //緯度
    scale="14"   //縮放

    controls="{{controls}}"  //點擊控件的時候觸發(fā)的事件，controls事件的api需要寫在data中使用數(shù)組包裹
    bindcontroltap="controltap" //控件 

    markers="{{markers}}"     //頁面中的信息即硼，markers中的事件也是需要寫在data中使用數(shù)組包裹
    bindmarkertap="markertap"   // 當點擊這些信息的時候觸發(fā)的事件

    polyline="{{polyline}}" 
    bindregionchange="regionchange"
    show-location   //顯示位置
    style="width: 100%;
    height: 300px;"></map>
    放入到wxml中逃片，在map.js中需要先獲取當前位置的定位坐標
    放在生命周期中：
    Page({ data:{
        longitude:0,
        latitude:0,
        controls:[     //頁面中可以存在多個數(shù)組，多個控件只酥，是通過id來區(qū)分的
        {
            id:'c01',  //在控件點擊事件回調(diào)會返回此id
            position:{left:20,top:50,width:50,height:50},  //控件相對地圖位置
            clickable:true,     //默認不可點擊
            iconPath:"/common/icon/all.png"  //項目目錄下的圖片路徑褥实，支持本地路徑、代碼包路徑
        }
        ]裂允，
         markers:[
        {
            id:1,     //marker 點擊事件回調(diào)會返回此 id损离。建議為每個 marker 設(shè)置上 number 類型 id，保證更新 marker 時有更好的性能绝编。
            latitude:40.22077,   //緯度范圍值在-90-90之間 
            longitude:116.23128, //經(jīng)度范圍在-180-180之間
            title:"16號看電影",    //信息
            iconPath:'/common/icon/all.png',   //要顯示的圖標
            width:50,  //設(shè)置圖標的大小
            height:50
        }
        ]
    },
    onLoad(){
        this.getPostion()
        wx.updateShareMenu({     //設(shè)置分享
        withShareTicket: true,
        success (res) {
            console.log(res)
         },
         fail(err){
             console.log(err)
         }
        })
    },    
    getPostion(){
        wx.getLocation({
            type:'wgs84',
            success(res){    //成功的回掉函數(shù)
                const latitude=res.latitude
                const longitude=res.longitude
                this.setData({ latitude, longitude})
            }
        })
    },
    controltap(e){
        console.log('控件被點擊了',e)
        if (e.controlId=='c01'){     //在這里通過id來區(qū)分是哪一個控件進行判斷僻澎，然后重新調(diào)用下      this.getPostion()這個方法就可以了,如果說頁面的數(shù)據(jù)比較多的情況下過濾數(shù)據(jù)需要提前在markers中的數(shù)據(jù)加入type數(shù)據(jù)類型，然后對其進行判斷即可
        this.getPostion()
        }else{
            let result=this.data.markers.filter((item)=>{
                return item.type=='food'
            })
            this.setData({markers:result})
        }
    }十饥，
    markertap(e){
        console.log(e)
    }
    })
網(wǎng)絡(luò)請求
    getNewData(){
        let url:"網(wǎng)址"   //請求的網(wǎng)址
        wx.request({
            url:url,
            method:"post",   //請求的方式
            data:{},   //傳參
            success(res){   //成功的回調(diào)函數(shù)
                console.log(res)
            }
        })
    }
這里應(yīng)該注意到的是請求的接口沒有跨域窟勃，只需要在微信公眾平臺配置即可：
    首頁--開發(fā)--開發(fā)設(shè)置--服務(wù)器域名
    在里面添加即可一個月只能添加5次，請求的時候不支持http的可以在開發(fā)工具 中的設(shè)置本地設(shè)置中勾選不效驗合法域名即可
存值
    setStorage(){
        wx.setStorageSync('userInfo',{  user:123,arr:[1,2,3]})
    },
取值
    getStorage(){
        let reuslt=wx.getStorageSync('userInfo')
        console.log(reuslt)
    },
清空
    clearStorage(){
         wx.clearStorageSync()
    }
打開騰訊地圖:wx.openLocation
    openMap(){
        wx.openLocation({
            latitusde:44,    
            longitude:116,    //當前默認的經(jīng)緯度
            fail(err){      //捕獲錯誤
                conosle.log(err)
            }
        })
    }
選擇位置:wx.chooseLocation
    在使用選擇位置之前需要提前設(shè)置分享頁面（wx.updateShareMenu）api逗堵，在onLoad方法中秉氧，剛開始進入頁面就要調(diào)用
    clooseMap(){
    wx.chooseLocation({
        success:function(res){
            console.log(res)
        }
    })
    }
電話:wx.makePhoneCall
    phone(){
        wx.makePhoneCall({
            phoneNumber:'12306'
        })
    }
掃碼:wx.scanCode
   參數(shù)： onlyFromCamera（是否只能從相機掃碼，不允許從相冊選擇圖片  ）   scanType（掃碼類型   ）
   scanCode(){
      wx.scanCode({
           onlyFromCamera: true,
            success (res) {
                console.log(res)
            }
      }) 
   }