vscode開發小程序2

開發tab:

　　　　1.下載阿里圖標到新建文件夾icons里面

　　　　2.在app.json里面的“windows”同層下設置tab:

 

默認樣式的設置：小程序中不識別通配符*！

 

 　　　　1.

 

　　　　2.查看效果，其他確實是默認的了：

　　

 

定義主題顏色：

　　　　1.在全局appwxss中聲明：

　　

 

　　　　2.在頁面中使用定義的這個主題顏色變量：

 

　　　　3.查看效果：

 

使用自定義組件：

　　　　1.新建組件

　　　　2.聲明應用：

　　　　　　哪個頁面要用該組件，就在哪個頁面的json文件里面進行聲明。

　　　　　　通過鍵值對的方式進行相對路徑的引用。

 

　　　　3.使用組件：

　　　　4.為組件定義css樣式，這里新建一個.less的樣式文件，在里面抒寫，寫完保存后會自動生成一個wxss的文件：

 輪播圖：

 　　1.在頁面的js文件中的data里面設置輪播圖的列表，在頁面一加載便發送異步請求或得圖片信息：

　　　　2.查看是否真的接受並賦值給列表了：

 

 

　　　　3.輪播圖的動態渲染及樣式自適應的設置：

　　　　

.index_swiper{
    swiper{
        // width: 750rpx;
        height: 340rpx;
        image{
            width:100%;
        }
    }
}

對於可能出現的域名403沒有權限的解決方法：

 　　　　1.點擊詳情 -> 勾選不進行域名的合法校驗。

　　　　 2.或者：添加域名到小程序后台的白名單中（產品上線后推薦使用的方式）：

　　　　　　進入到微信公眾號開發平台->開發->服務器域名->request合法域名（在這里進行添加即可）

代碼優化——避免異步請求的回調陷阱：

　　　　通過es6的promise解決：

　　　　1.新建：

 

　　　　2.原先的請求方式：

    // 1.發送異步請求獲取輪播圖數據:
    var reqTask = wx.request({
      url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata',
      success: (result)=>{
        // console.log(result)
        this.setData({
          swiperList:result.data.message
        })
      },
      // fail: ()=>{},
      // // 成功或者失敗都會調用的回調函數：
      // complete: ()=>{}
    });

　　　　改用請求方式為：

　　　　

    request({url:"https://api.zbztb.cn/api/public/v1/home/swiperdata"})
    .then(request => {
        this.setData({
          swiperList:result.data.message
        })
    })
　　 //后期要嵌套調用的話，就多用幾個.then：
　　 //.then()