微信小程序的基礎學習(-)

微信小程序官網 - https://mp.weixin.qq.com/cgi-bin/wx

1.創建微信小程序環境

       官網下載安裝微信小程序開發工具 

       若是想用vscode進行安裝 插件-wxml,minapp

       安裝完成後，新建小程序

       APPid - 若有已經註冊賬號，在微信小程序中進-開發-開發設置-找到

                 - 若無，可以自動生成測試的APPid

 

2.微信小程序的文檔結構解析

       -Pages    --- 小程序的所有頁面

          -index

             -index.wxss      -- index樣式 == css文件

             -index.wxml      --index結構

             -index.js           --index行爲

             -index.json       -- index配置文件

     -Utils      --- 工具函數文件

    -app.js    ---  入口文件

    -app.json  --- 整個項目的配置文件

    -app.wxss  --- 整個項目的樣式文件

 

3.小知識點

     小程序開發提出了一個新的單位 rpx ,它規定了所有的屏幕都是750rpx

 

4.常用的xml基本標籤和指令

    基本標籤

        (1) view -  類似與div

     （2）text -  標記文本標籤

       (3) button - 按鈕標籤

       (4) navigator - 鏈接標籤，可進行跳轉頁面

   指令

     （1 遍歷 wx:for ,wx:key   ==  v-for :key

       (2) 判斷  wx:if  ==   v-if

     （3 綁定事件  bind + 事件名   - 會有事件冒泡

                            catch + 事件名  -阻止事件冒泡

  xml文件

<view>
   <!-- list爲data中數據，遍歷自動有index，item，item代表遍歷的每一項數據 -->
   <view wx:for='{{list}}' wx:key='{{index}}'>
      <text>{{item}}</text>
   </view>
   
   <view wx:if='{{name == 'aa'}}'>我是aaa</view>

   <!-- 鏈接 -->
   <navigator url="/pages/list/list"></navigator>

   <text>{{name}}</text>
   <!-- 綁定事件 -->
   <button bindtap = 'changeName'>按鈕</button>
</view>

 

5.js文件常用屬性

    js文件格式

Page({
    //用於存放數據 - == vue中的data,在頁面用{{}}顯示
    data:{
        name:'aaa',
        list:[1,2,5,8,10]
    },
    //方法 - 直接與data同級
    changeName(){
        //獲取data中的數據
        console.log(this.data.name)
        //修改data中數據的唯一方式
        this.setData({
            name:'bbb'
        })
    },
    //頁面一加載就執行這個函數
    onLoad:function(options){
        //options可以拿到其他頁面傳遞過來的數據
    },
    // 頁面出現在前臺時執行
    onShow(options){},
    // 頁面從前臺變爲後臺時執行   
    onHide(options){}    
})

   常用的api

      (1) wx.login  _ 登錄時候獲取權限
        
           小程序登錄流程
           通過wx.login獲取微信官方給與的登錄憑證(code)=》將code通過後臺登錄接口發送後臺
           =》後臺會返回一個類似於token的東西openid =》存儲到持久化中（wx.setStorageSync）
     
      wx.login({
        success (res) {
            if (res.code) {
            //發起網絡請求
            wx.request({
                url: 'https://test.com/onLogin',
                data: {
                code: res.code
                }
            })
            } else {
            console.log('登錄失敗！' + res.errMsg)
            }
        }
    })

   (2)路由跳轉
    wx.navigateTo({
      url: 'test?id=1',})

   (3)顯示數據未顯示時候轉圈圈效果  - 一般用於請求後臺數據未返回時
    wx.showLoading({
      title: '加載中',
      })

    setTimeout(function () {
        wx.hideLoading()
    },

   (4) 輕提示-一閃而過
     wx.showToast({
      title: '加載中',
      })

   (5)小程序請求後臺
    wx.request({
      url: 'test.php', //僅爲示例，並非真實的接口地址
      data: {
         x: '',
         y: ''
      },
      header: {
         'content-type': 'application/json' // 默認值
      },
      success (res) {
         console.log(res.data)
      }
    })

     注意事項：報錯：不在一下request合法域名列表
     
              小程序裏面發送接口時。必須使用https協議也不是http
              在開發設置中，在開發工具中設置不去檢測請求協議
 

6.配置文件

  -app.js

     所有的頁面路徑都要在這裏配置，第一元素代表首頁路徑
     -"pages":["pages/detail/detail"]
     
       設置小程序的狀態欄，導航欄，標題，窗口背景色
     -"window"

       用來配置底部的切換欄目
     -"tabBar":{
        "list":[
            {
               "pagePath": "pages/index/index",
               "text": "首頁"
           }, {
              "pagePath": "pages/logs/logs",
              "text": "日誌"
            }]
        }
 

 -單頁面的配置
    微信小程序-框架-頁面配置
     "navigatorBarBackGroundColor": "#fff"
     "navigatorBarTitleText": "首頁"

     

7.使用模板

  作用：抽取若干頁面的公共結構和樣式(一般不包含複雜邏輯)
  使用：
  (1)模板 - 與Pages同級
         新建文件夾- templates （模板存放位置）
                     -myTemp.wxml
                        //name-區分模板的名字
                        <template name='atemp'>
                           <view class='testTemp'>sss</view>
                        </template>
                     -myTemp.wxss
                        .testTemp {
                            color:red
                        }
  (2)引入
    wxml - 
      <import src=''></import>//寫路徑
      //is - 確定是哪個模板
      <template is='atemp'></template>

    wxss 
      @import '路徑';