微信小程序開發(fā)教程-創(chuàng)新互聯(lián)

一、開發(fā)前準(zhǔn)備
申請賬號(hào)、安裝開發(fā)者工具
二、文件與目錄結(jié)構(gòu)
1、程序主體：
app.js
app.json 程序配置
1.1、程序配置

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)平頂山,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

pages 頁面路徑
    window 頁面的窗口表現(xiàn)
     tabBar 底部tab切換
     networkTimeout
     debug
        {
                 "pages":[  //哪個(gè)寫在上面，哪個(gè)就是入口文件
                        "pages/index/index",
                        "pages/movie/movie",
                        "pages/logs/logs"
                 ]
        }

app.wxss 公共樣式
2、頁面：
index.js
index.json 頁面配置
2.1、頁面配置
window 頁面的窗口表現(xiàn)
index.wxss 頁面樣式
index.wxml 頁面結(jié)構(gòu)
三、注冊程序與頁面
1、注冊app，只需要注冊一次，可以得到一個(gè)程序的實(shí)例，可以被其他頁面訪問
在其他頁面，通過getApp全局函數(shù)獲取應(yīng)用實(shí)例 const app = getApp(); 獲取全局?jǐn)?shù)據(jù)：app.gldData; //{a:1}

App({
    gldData:{ a:1 },
    onLaunch:function(){  //一運(yùn)行小程序就會(huì)執(zhí)行
        //初始化代碼
    }
})
2、注冊page，有幾個(gè)頁面，在每個(gè)頁面內(nèi)都需要注冊
Page({
    data:{
        b:2
    },
    onLoad:function(){   //一進(jìn)入頁面就會(huì)執(zhí)行
        console.log( this.data )  //{b:2}  通過this，獲取單個(gè)頁面內(nèi)數(shù)據(jù)
    }
})

四、程序生命周期
1、App

App({

  //在小程序運(yùn)行期間，只會(huì)執(zhí)行一次
    //程序銷毀之后(過了一段時(shí)間沒有運(yùn)行或者手動(dòng)刪除小程序)，再次啟動(dòng)小程序就會(huì)執(zhí)行
    onLaunch(){
        console.log('小程序啟動(dòng)時(shí)執(zhí)行')
    },
    //每次從后臺(tái)切換出來就會(huì)執(zhí)行
    onShow(){
        console.log('切換到小程序時(shí)執(zhí)行')
    },
    //每次切換到后臺(tái)就會(huì)執(zhí)行
    onHide(){
        console.log('小程序被隱藏在后臺(tái)時(shí)執(zhí)行')
    }
})

2、Page

Page({
    //tab之間的切換，不會(huì)讓頁面重新加載，也不會(huì)卸載，只會(huì)讓頁面顯示與隱藏
    //在進(jìn)行NavigatorTo鏈接跳轉(zhuǎn)的時(shí)候，目標(biāo)頁面會(huì)被加載onLoad，原始頁面會(huì)被隱藏onHide
    //此時(shí)點(diǎn)擊導(dǎo)航條上的回退按鈕NavigatorBack，目標(biāo)頁面會(huì)onShow，不會(huì)onLoad，原始頁面會(huì)被卸載onUnload

    //頁面加載的時(shí)候執(zhí)行，只會(huì)執(zhí)行一次
    onLoad(){   },
    //頁面第一次渲染完成之后執(zhí)行，只會(huì)執(zhí)行一次
    onReady(){  },
    //頁面顯示就會(huì)執(zhí)行，會(huì)執(zhí)行多次，比如tab切換從a頁面切換到b頁面，那么也就是等于b頁面顯示了
    onShow(){   },
    //頁面隱藏就會(huì)執(zhí)行，會(huì)執(zhí)行多次，比如tab切換從a頁面切換到b頁面，那么也就是等于a頁面隱藏了
    onHide(){   },
    //頁面卸載的時(shí)候執(zhí)行，只會(huì)執(zhí)行一次
    onUnload(){ },
})

五、數(shù)據(jù)與列表渲染
1、數(shù)據(jù)在index.js里面的data里面定義，

Page({
    data:{ //數(shù)據(jù)類型，可以是字符串、數(shù)組、對象、數(shù)值等等
        name:'kate'
    }
})
要輸出到頁面上，直接就是<view>{{name}}</view>即可

2、渲染數(shù)組 wx:for wx:key

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3']
    }
})
<view wx:for="{{names}}" wx:key="*this">{{item}}</view>

3、條件渲染變量為true，即滿足條件就進(jìn)行渲染，反之就不進(jìn)行渲染

<view wx:if="{{ score>60 && score<90 }}">等級(jí)B</view> 
<view wx:elif="{{ score<60 && score>0 }}">等級(jí)C</view>
<view wx:else>等級(jí)A</view>

4、塊級(jí)渲染block，block是虛擬組件，不會(huì)出現(xiàn)在頁面上
同時(shí)顯示多個(gè)元素

<block wx:if="{{ score==80 }}">
    <view>{{ name }}</view>
    <view>{{ score }}</view>
    <view>等級(jí)A</view>
</block>
<block wx:else>
    <view>{{ name }}</view>
    <view>{{ score }}</view>
    <view>等級(jí)B</view>
</block>

5、使用模板

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3'],
    score:80,
    name:'aaa'
    }
})
先定義模板：
<template name="myTemplate1">
    <view>我是模板</view>
    <view>{{name}}</view>
</template>

<template name="myTemplate2">
    <block wx:for="{{age}}" wx:key="*this">
        <view>{{item}}</view>   
        <view>啦啦啦</view>
    </block>
</template> 

<template name="myTemplate3">
    <block wx:if="{{score==80}}">
        <view>{{name}}</view>   
        <view>{{score}}</view>
        <view>等級(jí)A</view>
    </block>
    <block wx:else>
        及格
    </block>
</template> 

使用：
<view>
    <template is="myTemplate1" data="{{name:'kate'}}"></template>
    <template is="myTemplate2" data="{{age:age}}"></template>
    <template is="myTemplate3" data="{{name,score}}"></template> //data="{{name,score}}等價(jià)于data="{{name:name , score:score}}
</view>

6、import與include
可以把模板定義在專門的template.wxml里面
要使用里面的模板，只需要在對應(yīng)的wxml里面
<import src="template.wxml" /> //import引入的模板，你需要在頁面上告知使用的是哪一個(gè)模板，<template is="myTemplate1" data="{{name:'kate'}}"></template>
<include src="template.wxml" /> //include引入模板，在頁面上什么位置寫上，那么模板代碼就在什么地方顯示
微信小程序開發(fā)教程

六、事件
綁定事件

<view bind:tap="tabHandle" data-name="容器">
    <text>點(diǎn)擊</text>
</view>
tabHandle(event){
    //event：是事件對象，里面有detail等屬性
    //target：事件從哪里觸發(fā)的
    //currentTarget：事件在哪個(gè)上面執(zhí)行的，通過event.currentTarget.dataset.name可以獲取到到"容器"這個(gè)自定義值
    //比如點(diǎn)擊text，那么target就是text，currentTarget是外面的view，因?yàn)槊芭萘?，所以盡管點(diǎn)擊text，tabHandle事件仍然會(huì)觸發(fā)
}
如果要阻止事件冒泡，那么就使用catch，而不是bind，如：
<view catch:tap="tabHandle">
    <text>點(diǎn)擊</text>
</view>

這樣點(diǎn)擊text，tabHandle事件仍然會(huì)觸發(fā)，但是view上一級(jí)就不會(huì)冒泡上去了，因?yàn)樽柚姑芭萘?br/>七、樣式wxss
尺寸單位：rpx，只要設(shè)置寬度為750rpx，那么不管在什么手機(jī)上都是占滿一整個(gè)屏幕
引入樣式：@import '../style.wxss'
全局樣式與局部樣式：定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會(huì)覆蓋 app.wxss 中相同的選擇器。
八、微信小程序腳本語言wxs
不支持es6的語法，就當(dāng)成es5的javascript

定義(寫在模板頁面內(nèi))：
<wxs module="tool">  
    function createName(names){
        return names.split(',')
    }
    module.exports = createName
    //tool就表示導(dǎo)出的函數(shù)createName
</wxs>
使用：
<view wx:for="tool('1,2,3,4')">{{item}}</view>

也可以將wxs代碼寫在一個(gè)單獨(dú)的.wxs文件內(nèi)，然后引入這個(gè)文件，類似于js
tool.wxs
function createName(names){
        return names.split(',')
    }
module.exports = createName
模板頁引入：<wxs src="tool.wxs" module="tool"></wxs>
使用：<view wx:for="tool('1,2,3,4')">{{item}}</view>

九、更新頁面data數(shù)據(jù)

data:{
    number:1
}
onTap(){
    this.data.number = 2;  //錯(cuò)誤
    this.setData({
        number:2;  //正確
    })
}

總結(jié)：使用setData可以更改data里面的數(shù)據(jù)（同步更新），然后視圖也會(huì)更新（異步更新）
不是更改一個(gè)data，視圖就馬上更新，而且確定data不會(huì)更改之后，將所有更改的data一次性渲染到視圖（盡管是異步更新，時(shí)間間隔仍然很短）

十、組件
頁面由組件組成
view、text就是一個(gè)組件，只不過沒有樣式
看文檔學(xué)習(xí)微信小程序內(nèi)置組件
https://developers.weixin.qq.com/miniprogram/dev/component/

十一、自定義組件
舉例說明：新建magicNumber.組件
首先：創(chuàng)建magicNumber.文件夾，里面創(chuàng)建magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json文件

magicNumber.wxml文件：
<view class="pressBtn" id="view" data-name="容器">
        {{nowIn}}
    <view>{{magicNumber}}</view>
    <text id="text" data-name="文字" bind:tap="onTap">點(diǎn)擊顯示magicNumber值</text>
</view>
magicNumber.json文件：
{
    "component":true
}
magicNumber.js文件：
這里是注冊組件，不是注冊頁面，所以不能是Page({})，而是：
Component({
    properties:{
        nowIn:String
    },
    data:{
        magicNumber:Math.random(),
    },
    attached(){  //默認(rèn)一上來就觸發(fā)一次getMagicNumber事件，這樣父組件監(jiān)聽到觸發(fā)了，也會(huì)馬上觸發(fā)他的getMagicNumberHandle事件，所以一上來就默認(rèn)更新了
        this.triggerEvent('getMagicNumber',this.data.magicNumber)
    },
    methods:{  //子組件的事件寫在methods里面
        onTap(event){
            this.setData({
                magicNumber:Math.random()
            })
            this.triggerEvent('getMagicNumber',this.data.magicNumber)  //第二個(gè)參數(shù)是傳到父組件的值
            //子組件向父組件傳值，通過自定義事件，使用triggerEvent，告知父組件，該修改某個(gè)值了，點(diǎn)擊的時(shí)候，傳達(dá)一些信息過去，這里傳過去this.data.magicNumber這個(gè)值，也可以傳遞對象過去，作為第二個(gè)參數(shù)
            console.log(event.currentTarget.dataset.name)  //獲取到data-name="文字"里面的"文字"
        }
    }
})

組件注冊完畢，接下來是在某個(gè)頁面進(jìn)行使用
假如在index頁面使用，首先在index文件夾下面創(chuàng)建index.json文件，里面配置：

{
  "usingComponents": {
    "magic-number":"/pages/magicNumber/magicNumber"
  }
}
使用：index.wxml

<view class="container">
  <magic-number  now-in="首頁" bind:getMagicNumber="getMagicNumberHandle"></magic-number>
  <view>{{num}}</view>
</view>
index.js
Page({
    data:{
        num:Math.floor(maN*1000)
    },
    getMagicNumberHandle(event){  //監(jiān)聽子組件的getMagicNumber事件，一旦觸發(fā)了，馬上做出回應(yīng)
                console.log(event.detail);  傳過來的信息可以通過【事件對象】event.detail獲取到
                this.setData({
                    num:Math.floor(event.detail*1000)  //這里就是處理了從子組件拿到的值
                })
        }
})

十二、路由
兩種方式實(shí)現(xiàn)導(dǎo)航的跳轉(zhuǎn)
1、navigator內(nèi)置導(dǎo)航組件
url：要跳轉(zhuǎn)的頁面地址
open-type：跳轉(zhuǎn)方式，有5種方式
navigate：默認(rèn)跳轉(zhuǎn)方式
redirect：重定向
switchTab：跳到某個(gè)tab
navigateBack：回退
reLaunch：重加載

頁面切換，open-type="navigate"
index.html

<view>
<navigator url="/pages/about/about" open-type="navigate">About</navigator>
<navigator url="/pages/movie/movie" open-type="navigate">Movie</navigator>  
<navigator url="/pages/logs/logs" open-type="switchTab">Logs</navigator>  //tab切換
<navigator open-type="navigateBack">回退</navigator>  //回退到上一個(gè)頁面
<navigator url="/pages/movie/movie" open-type="redirect">重定向到Movie</navigator> 上方有回退按鈕
<navigator url="/pages/movie/movie" open-type="reLaunch">reLaunch</navigator> 上方?jīng)]有回退按鈕
</view>

★logs屬于底部tab，不可使用navigate跳轉(zhuǎn)，只能使用下面的tab切換進(jìn)行跳轉(zhuǎn)

2、api跳轉(zhuǎn)
wx.navigateTo(object) 跳轉(zhuǎn)到
wx.redirectTo(object) 重定向
wx.switchTab(object) 跳到某個(gè)tab
wx.navigateBack(object) 回退
wx.reLaunch(object) 重加載

about.wxml
<view bind:tap="goMovie">使用api跳轉(zhuǎn)到movie</view>
about.js
Page({
    goMovie(){
       wx.navigateTo({
            url:'/pages/movie/movie'
        })
    }
})

十三、授權(quán)與用戶信息授權(quán)

獲取用戶昵稱、性別，頭像等等，需要在頁面上先放置一個(gè)button，即授權(quán)button，用戶點(diǎn)擊確認(rèn)之后才可以獲取用戶信息
1、通過按鈕來獲取用戶信息
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">獲取用戶信息</button>
如果開始用戶沒有點(diǎn)擊授權(quán)，會(huì)彈出一個(gè)彈框，用戶可以選擇授權(quán)或者不授權(quán)，點(diǎn)擊授權(quán)，通過回調(diào)函數(shù)onGetUserInfo，里面有事件對象event，可以獲取到用戶的信息

2、通過普通點(diǎn)擊事件獲取
在用戶未授權(quán)過的情況下調(diào)用此接口，將不再出現(xiàn)授權(quán)彈窗，會(huì)直接進(jìn)入 fail 回調(diào)。在用戶已授權(quán)的情況下調(diào)用此接口，可成功獲取用戶信息。所以，最好先使用button來獲取用戶信息

<button bind:tap="getUserInfo">獲取用戶信息</button>
getUserInfo(ev){
   wx.getUserInfo({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(err)=>{
            console.log(err)
        }
    })
  }

★通過普通點(diǎn)擊事件獲取用戶api，不會(huì)出現(xiàn)提醒授權(quán)彈框

獲取其他信息，如位置等等的，需要先調(diào)取wx.authorize(object)的api，獲取用戶的授權(quán)，然后再調(diào)用相關(guān)的api，直接獲取信息，未授權(quán)先進(jìn)行授權(quán)

案例：獲取用戶地理位置

<button bind:tap="getAuthorize">授權(quán)位置</button>  //這時(shí)候，僅僅是得到用戶授權(quán)可以獲取地理位置，具體的信息還一無所知，需要通過其他的api來獲取最終的位置信息
getAuthorize(){
   wx.authorize({
        scope:'scope.userLocation',
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }
<button bind:tap="getLocation">獲取位置信息</button>
getLocation(){
   wx.getLocation({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }
    <button bind:tap="getSetting">獲取授權(quán)信息</button>  //查看哪些用戶信息已經(jīng)授權(quán)可以使用
    getSetting(){
       wx.getsetting({
            success:(msg)=>{
            console.log(msg,'授權(quán)相關(guān)信息')
        }
        })
    }
    <button bind:tap="openSetting">打開授權(quán)信息面板</button>  //用戶第一次拒絕授權(quán)地理位置等信息，
    //后續(xù)授權(quán)確認(rèn)彈框?qū)⒉辉俪霈F(xiàn)，這里可以手動(dòng)打開授權(quán)信息面板，如圖所示，用戶手動(dòng)設(shè)置完成之后回退回去，會(huì)執(zhí)行下面的方法
    openSetting(){
       wx.opensetting({
            success:(msg)=>{
            console.log(msg,'設(shè)置相關(guān)信息完成')
        }
        })
    }

微信小程序開發(fā)教程

十四、使用緩存
在movie頁面緩存數(shù)據(jù)
使用緩存，多個(gè)頁面從而可以共享一些數(shù)據(jù)，但是使用起來需要慎重
異步緩存數(shù)據(jù)：

<button bind:tap="onCache">緩存數(shù)據(jù)</button>
   wx.setStorage({
            key:'name',  //緩存數(shù)據(jù)的鍵名
            data:{  //可以是字符串或者對象
                p1:'lin'
            },
            success:()=>{  //有回調(diào)函數(shù)，成功的時(shí)候才執(zhí)行
                console.log('存儲(chǔ)名字成功');
               wx.getStorage({  //獲取緩存，可以同步或者異步
                    key:'name',
                    success:(data)=>{
                        console.log(data)
                    }
                })
            }
        })
    }

同步緩存數(shù)據(jù)：

wx.setStorageSync('names','kate');
let names = wx.getStorageSync('names');
console.log(names);

在about頁面獲取緩存數(shù)據(jù)，同步獲取緩存數(shù)據(jù)

{{name}}
<button bind:tap="getName">獲取name</button>
Page({
    data:{
        name:''
    },
    getName(){
        let n = wx.getStorageSync('name');
        console.log(n);
        if(n){
            this.setData({
                name:n.p1
            })
        }
    }
})

移除緩存的數(shù)據(jù)，同步移除
<button bind:tap="removeName">移除緩存的name</button>
removeName(){
wx.removeStorageSync('names');
}

十五、請求與反饋，類似ajax，axios

<view bind:tap = "goRequest"></view>
goRequest(){
       wx.showLoading({ //一個(gè)loading動(dòng)畫，請求成功了會(huì)消失，下面已經(jīng)定義了
            title:'請求中'
        });
       wx.request({
            url:''www.baidu.com,
            data:{  //給服務(wù)器傳遞請求數(shù)據(jù)
                name:‘joe’
            },
            methods:'post',  //默認(rèn)是get請求
            success:(res)=>{
                console.log(res.data);
                //請求成功的反饋
               wx.showToast({
                    title:'請求已經(jīng)成功'
                })
                //請求成功隱藏loading
               wx.hideLoading();
            },
            fail:(e)=>{
               wx.showToast({
                    title:e.errMsg
                })
            }
        })
    }

★詳情-不校驗(yàn)域名合法域名

十六、微信小程序線上環(huán)境搭建
微信小程序開發(fā)教程
1、注冊并且登錄騰訊云-解決方案-微信小程序-關(guān)聯(lián)賬號(hào)
2、上傳代碼

【總結(jié)】：
父組件向子組件傳值，通過properties傳值
子組件向父組件傳值，通過自定義事件，使用triggerEvent，告知父組件，該修改某個(gè)值了，點(diǎn)擊的時(shí)候，傳達(dá)一些信息過去，這里傳過去this.data.magicNumber這個(gè)值，也可以傳遞對象過去，作為第二個(gè)參數(shù)

零碎知識(shí)點(diǎn)
1、對象被轉(zhuǎn)為字符串就變成了[ object object ]
2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".
一直顯示這個(gè)，因?yàn)榘裮ethods寫在了data{}里面，作死??！
微信小程序開發(fā)教程
3、微信開發(fā)者工具：清緩存可以清除用戶登錄信息

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：微信小程序開發(fā)教程-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article10/cocogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、軟件開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站策劃、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容