AV无码一级毛片免费播放,成片免费看一级A片视频,japanese日本熟妇另类

原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處

寫在前面

此貼適合小白學習，做出第一個自己的小Demo，大神可以選擇是否踩踏… 歡迎和我一樣的小白一起學習交流.. （被坑死了的我，含淚寫下的初體驗Demo分享）

為了給新手建立一個從0到1的過程，盡量一點一點加入新內容.. 給初學者一點點接受的過程..大家加油！！！

有著使用最簡單案例展示小程序框架最核心內容的野心，并努力達成中…

初學者通過該帖將學習到

0、小程序從無到有的全過程
1、小程序的文件結構
2、小程序的基本組件 image、view、button、text
3、小程序的推薦彈性布局 flex
4、小程序框架的核心內容—數據綁定
5、小程序的基本事件 tap
6、小程序的核心內容—列表渲染
7、小程序的下拉刷新、上拉加載
8、小程序的模塊化編程—封裝自己的按鈕
9、小程序的一些坑
10、建立一個小程序單頁面開發的一般流程，建立從設計圖到頁面設計的大局觀
11、其他更多內容….

展示效果

準備的內容，小白不要錯過，了解基本文件結構的讀者可以跳過，但是推薦看看，會有一些收獲的。

準備

1、默認讀者具有 html、css、js 的一般性基礎知識。對于沒有任何相關知識的讀者，請參看下面內容，或者可以直接上手寫代碼，再回頭補上基礎，未嘗不可。

2、文件的對應關系

wxml ：類 html5
wxss：css3（一丟丟的差異）
js：javascript
json：json

3、小程序相關內容

（1）小程序的文件結構

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

文件	必填	說明
app.js	是	小程序的邏輯
app.json	是	小程序的公共設置
app.wxss	否	小程序的公共樣式表

一個小程序頁面由四個文件組成，分別是：

文件類型	必填	說明
js	是	小程序的邏輯
wxml	是	小程序的公共設置
wxss	否	小程序的公共樣式表
json	否	小程序的公共樣式表

提醒：為了方便開發者減少配置項，規定描述頁面的四個文件必須具有相同的路徑與文件名。編譯時，將自動關聯。

（2）創建Demo，為了更好的理解小程序的文件結構，學習時，我們直接從一個空項目開始構建。開發時，請盡情使用快速創建。

（3）手動構建以下的文件結構，每次創建后即刻保存（Ctrl + S），觀察編譯結果，體會各個文件的必須性（嫌麻煩的話，可以略過）。最終目錄如下：

注意：welcome頁面的 wxss、json 文件是非必須的，但是新版本的開發工具，如果你在 app.json 的 pages 中配置了 welcome 頁面的話，wxss、json 文件即使不存在，開發工具也會自動創建 wxss、json 文件以保證頁面的4個文件同時存在。

一個新技能：頁面的4個文件，開發工具可以自動創建，你僅僅需要在 app.json 文件中為 pages 配置頁面的路徑，開發工具將自動頁面的 4 個文件。比如：為 pages 添加一個 "pages/index/index" ，觀察文件結構面板的變化。

{
    "pages": [
      "pages/welcome/welcome",
      "pages/index/index"
    ]
}

最終我們項目Demo的問價結構是：

（4）小程序的沒有任何理由的兩個坑

app.json 文件中不可以加入任何的注釋，否則將報編譯錯誤，頁面的 json文件親測也不可以（開發工具的 bug，記憶中有時候可以哦）；
為了不出現莫名其妙的問題，小程序app.json 、app.js ，頁面的 js、json 文件最簡單也要如下圖設置，其他文件可以空白。比如：頁面的 json 文件如果沒有給出 {} 的話，頁面 wxml 中的布局將不會顯示；小程序的 app.json 如果設置pages或pages 中沒有設置任何頁面的話，就會編譯錯誤，等等。（ps：這些坑，有的是好的，有的是真的坑，慢慢體會吧）

歡迎頁

創建好基本的文件結構之后，下面開始首頁的內容，根據以下的設計圖，完成歡迎頁的設計。

推薦初學者按照以下步驟來創建，筆者盡最大可能讓初學者體會一下頁面布局的整體觀念，這也是筆者學習時的路徑，期待能幫助更多的人。

先骨架（wxml），再穿衣服（wxss），最后搞個小動作（js）

（1）構建 welcome.wxml 頁面骨架，填充內容

welcome.wxml 需要使用到 view、image、text、button 組件

a、view 組件等價于是前端中 div，唯一作用是：容器、分割元素。<view class="container"></view>
b、image 組件的 src 指定圖片的路徑 <image src="/imgs/minat.jpg" />
c、text 組件顯示文本，可以直接使用文本，但是不推薦，兩個原因：可讀性差、若移動端需要文本可以長按選中的話，必須使用 text 組件，另外 text 組件中僅可嵌套 text 組件，其他組件會被編譯器自動移除
d、button 組件的 bindtap 是按鈕定義一個點擊事件，type 是定義按鈕的樣式，使用默認樣式即可

注釋的快捷鍵是：Ctrl + /

<!-- welcome.wxml 文件內容 -->
<view class="container">
    <image src="/imgs/minat.jpg" class="meimg"></image>
    <text class="motto">Hello, MINA搬運工</text>
    <button bindtap="toMina" type="default">開啟小程序之旅</button>
</view>

筆者介紹的基本組件屬性，是夠用的，更多內容可以去官方文檔查閱。

該步驟完成后，得到下圖：

（2）頁面骨架穿上衣服 welcome.wxss ，定義樣式、布局

/* welcome.wxss */
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:#c0c0c0;
}

.meimg {
    width: 200rpx;
    height: 200rpx;
    margin-top: 200rpx;
    border-radius: 50%;
}

.motto{
    margin-top: 150rpx;
    margin-bottom: 200rpx;
    font-family:'Times New Roman';
    font-size: 16px;
}

a、小程序官方推薦的布局方案是 flex，本例使用最簡單的 flex 布局實現，建立最初的認識，更多內容
- display: flex; 固定寫法，表示容器內元素使用 flex 彈性布局
- flex-direction: column; 決定元素的排列方向，column 指按照交叉軸方向排列
- align-items: center; 決定元素在交叉軸上的對齊方式，center 指居中排列
b、設置頁面背景時，可能會遇到背景無法撐滿整個頁面的情況，其實， page 才是整個頁面的最頂層容器，不信打開調試的Wxml面板

在 welcome.wxss 中追加定義 page 節點的樣式，將背景色定義到 page 下，即可

page {
    min-height: 100%;
    background-color:#c0c0c0;
}

該步驟完成后，得到下圖：

（3）最上方和設計圖顏色不一致

最上方區域是小程序預定義的導航欄，開發者只可以更改顏色和導航標題文字內容，需要在全局配置文件 app.json 中設置 window的導航欄背景顏色屬性 navigationBarBackgroundColor 和頁面背景色一致，配置后的內容如下：

{
    "pages": [
      "pages/welcome/welcome",
      "pages/index/index"
    ],
    "window": {
      "navigationBarBackgroundColor":"#c0c0c0"
    }
}

該步驟完成后，得到下圖：

（4）搞一個小動作 welcome.js

Page{(
  toMina:function(){
    // 點擊按鈕，實現頁面跳轉到內容頁
    wx.redirectTo({
      url: '../index/index',
    })
  }
})

（5）初體驗小程序的單向數據綁定

如果你是一個前端開發者，請不要在小程序里動不動就想要 getElement ，這是傳統的 dom優先的開發思維。在小程序里，我們以數據優先，沒有中間環節，直接在 js 中設置數據內容，這一過程得益于小程序的核心內容之一：數據綁定。

wxml 中的動態數據均來自對應 Page 的 data。這是官方文檔中的一句話，意圖告訴我們將頁面的數據直放到 data 中，然后 wxml 中使用的 {{}} 語法將數據進行顯示，注意：{{}} 可以盡享簡單的路徑計算、邏輯計算、三目運算、擴展運算符等，但不支持使用函數的直接調用，畢竟 wxml 是頁面內容，不是邏輯！，看不懂這段話，沒有太大關系，只要有點印象即可。本次demo中，只涉及最簡單的語法。

將 image 的 src、 text 的“MINA搬運工”定義在 welcome.js 的 data 中，在 wxml 中使用 {{}} 進行數據的動態綁定

// welcome.js
Page({
  data:{
    name:"MINA搬運工",
    imgSrc:"/imgs/minat.jpg"
  },
  toMina:function(){
    wx.navigateTo({
      url: '../index/index',
    })
  }
})

<!-- welcome.wxml -->
<view class="container">
    <image src="{{imgSrc}}" class="meimg"></image>
    <text class="motto">Hello, {{name}}</text>
    <button bindtap="toMina" type="default">開啟小程序之旅</button>
</view>

最終得到歡迎頁面的效果是：

說明

和實際展示效果有出入，是因為

我要休息一下，上面的內容寫了我整整 3 個小時，我現在需要喝點水，吃點飯… 稍后回來…

封裝一個按鈕

個人喜歡在前端開發中常去封裝一些組件，以便后期更好的使用。

小程序框架中也給出 模板化 這個關鍵詞，面對小程序1024kb的限制，模板化作為實現代碼復用性的一個關鍵技術，無疑將是重中之中，筆者希望借助 view、text 組件封裝一個按鈕，使得大家對于模板化有個基本的認識。

上圖可以看出，現階段距離目標只差一個按鈕。

為了更好的實時看到封裝的組件的樣式，組件的封裝和一般的開發是一致的，直接在所需要的位置進行設計，完成之后，只是最后需要將內容抽取出來，按照一定的語法定義，以便復用。

下面直接在歡迎頁追加的一個使用 view 、text 封裝一個按鈕

（1）追加按鈕定義后的 welcome.wxml、welcome.wxss 、welcome.js 內容

<!-- welcome.wxml -->
<view class="container">
    <image src="{{imgSrc}}" class="meimg"></image>
    <text class="motto">Hello, {{name}}</text>
    <!--<button bindtap="toMina" type="default">開啟小程序之旅</button>-->

    <!-- view、text封裝的一個簡易按鈕  start-->
    <view class="btn {{btnColor}}" bindtap="toMina">
        <text class="btntext">開啟小程序之旅</text>
    </view>
    <!-- view、text封裝的一個簡易按鈕  end-->
</view>

/* welcome.wxss */
page {
    min-height: 100%;
    background-color:#c0c0c0;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meimg {
    width: 200rpx;
    height: 200rpx;
    margin-top: 200rpx;
    border-radius: 50%;
}

.motto{
    margin-top: 150rpx;
    margin-bottom: 200rpx;
    font-family:'Times New Roman';
    font-size: 16px;
}

/* view、text封裝的一個簡易按鈕樣式 start */
.btn{
    margin: 0 10rpx 100rpx;
    padding: 20rpx;
    border-radius: 10px;
}

.btncolor1{
    background-color: lightseagreen;
}


.btncolor2{
    background-color: paleturquoise;
}

.btntext{
    font-family: Courier;
    font-size: 16px;
}
/* view、text封裝的一個簡易按鈕樣式 end */

// welcome.js
Page({
  data:{
    name:"MINA搬運工",
    imgSrc:"/imgs/minat.jpg",

    // view、text封裝的一個簡易按鈕的初始樣式
    btnColor:"btncolor1"
  },
  // 簡易按鈕的點擊事件
  toMina:function(){
    // 獲取 thisthis 
    var that = this;
    // 點擊簡易按鈕時，更改簡易按鈕的樣式
    this.setData({btnColor:"btncolor2"})
    // 并跳轉到內容頁
    wx.navigateTo({
      url: '../index/index',
      // 跳轉成功之后的回調函數
      success:function(){
        // 更改簡易按鈕的樣式
        // 操作前后按鈕樣式的更改實現一個點擊按下和松開的效果對比
        that.setData({btnColor:"btncolor1"})
      }
    })
  }
})

最終實現了與目標效果一致的內容：

（2）下面開始將封裝的按鈕進行一個抽取，以達到代碼復用

（3）按照下圖在 welcome 文件下新建一個 btn 文件，并在其中創建同名的 wxml、wxss 文件。注意：btn 路徑不需要配置在 app.json 的pages 中，因為該內容是一個模板組件，而不是一個需要被app管理路由的頁面

（4）將 welcome.wxml、welcome.wxss 文件中對于簡易按鈕實現的定義抽取到 btn.wxml 、btn.wxss ，如下：

<!-- btn.wxml -->
<template name="myBtn">
    <!-- view、text封裝的一個簡易按鈕  start-->
    <view class="btn {{btnColor}}" bindtap="toMina">
        <text class="btntext">開啟小程序之旅</text>
    </view>
    <!-- view、text封裝的一個簡易按鈕  end-->
</template>

/* btn.wxss */
/* view、text封裝的一個簡易按鈕樣式 start */
.btn{
    margin: 0 10rpx 100rpx;
    padding: 20rpx;
    border-radius: 10px;
}

.btncolor1{
    background-color: lightseagreen;
}

.btncolor2{
    background-color: paleturquoise;
}

.btntext{
    font-family: Courier;
    font-size: 16px;
}
/* view、text封裝的一個簡易按鈕樣式 end */

（5）welcome.wxml、welcome.wxss 中更改如下圖，紅框內容：

（6）模板化實現的語法說明

<template name="myBtn">..</template> 的作用是將其中的內容打包，定義一個名字 myBtn，作為一個模板待用。

在需要使用該模板的 wxml 文件中（比如：welcome.wxml），使用 <import src="btn/btn.wxml" /> 將模板所在 wxml 文件導入通過<template is="myBtn" data="{{btnColor}}">..</template> 實現模板重用，其中 is 指定為定義模板時的 name 屬性值，data 指定為模板灌入的數據。（實際開發中可能會忘記的點：模板擁有自己的作用域，只能使用data傳入的數據。）

對于為模板定義的樣式，使用 @import "btn/btn.wxss"; 將其在目標 wxml 對應的 wxss 文件中加以導入（比如：welcome.wxml 對應的樣式文件 welcome.wxss）。