微信小程序之項目的創建

　　之前就想學習一下微信小程序，只不過前段時間在學習Java中的一些線程的知識，拖了很久也沒有實行這個目標，今天終於從網上找了一個完整的視頻，來從頭學習完整的開發流程，現在逐漸有一種想法，就是自己構建項目，開發項目完成的一整套流程，想弄的特別熟悉，沒事的時候，有什么好的想法的時候，可以自己開發一個項目，從今天起，重視項目的構建，獨立開發！這次是跟着視頻講解來做一下筆記！

一、構建項目

微信小程序的開發需要借助微信提供的生態，到微信公眾平台上去申請賬號，得到appId，做一些開發小程序的准備工作，具體網站是：https://mp.weixin.qq.com/

1、新建項目

我用的開發者工具是微信官方提供的開發者工具，下載的是：穩定版 Stable Build (1.02.1904090)，用起來還是挺好用的，哈哈，第一次使用，還是不錯的，可能也是因為沒有用過其他的吧，進入正題吧！

（1）創建一個空白的項目，也可以是官方提供的有一些基本的文件的項目，這里選擇的是把一些文件都刪除掉，只剩下pages文件夾以及project.config.json，這個是項目的配置文件，然后從頭開始新建文件以及文件夾，需要新建的文件以及文件夾如下：

app.json

注意：這個文件中是需要寫一些代碼的，不然后面沒辦法新建page模塊，只需要寫如下代碼：{}大括號，代表的是一個對象，

官方app.json文件配置項詳解地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

小程序頁面配置詳細參數：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

app.js

注意：這個也是需要寫初始代碼的，不然沒法創建page模塊，只需要寫如下代碼：App()

classic基礎模塊

注意在微信開發者工具中直接右鍵 -->新建classic目錄-->新建page，然后填寫classic名稱，即自動創建了四個文件classic.js、classic.json、classic.wxml、classic.wxss，並且在app.json中添加了"pages": ["pages/classic/classic"]這段代碼，這個第二個classic代表的是classic.wxml頁面文件，這就是在app.json 中注冊完成，每新建一個page模塊都需要在這個app.json中注冊

下面是一個模塊中的四個文件：

classic.js

classic.json

classic.wxml

這里其實是小程序的骨架，寫小程序中特有的標簽，其實相當於前端框架中的組件，所以小程序中的頁面是由公用的組件來構成的，官方的文檔地址：

https://developers.weixin.qq.com/miniprogram/dev/component/

簡單的實例代碼：

<view class="chunk color1"></view>
<view class="chunk color2"></view>
<view class="chunk color3"></view>

classic.wxss

這里是來寫頁面的樣式的，相當於前端中的css文件

簡單的代碼示例：

.chunk{
  width:100px;
  height: 100px;
}

.color1{
  background-color: blue;
}
.color2{
  background-color: black;
}
.color3{
  background-color: yellow;
}

2、項目中布局

小程序中的布局是支持flex布局的，雖然我也不知道flex布局是什么鬼，但是應該是和boostrap中的柵欄形式的布局是類似的吧

Flex布局的特點:

(1)任意方向的伸縮，向左，向右，向下，向上

(2)在樣式層可以調換和重排順序

(3)主軸和側軸方便配置

(4)子元素的空間拉伸和填充

(5)沿着容器對齊

Flex布局的應用：

（1）主體元素的布局，最大的container的布局設置內部塊狀元素的橫向排列和縱向排列

.container{

display: flex; // flex的用法

/* flex-direction: column; */ 縱向排列

/* flex-direction: row; */ 橫向排列

/* flex-direction: row-reverse; */ 橫向顛倒排列 也就是反轉過來

flex-direction: column-reverse; 縱向顛倒排列 也是反轉過來

}

（2）view組件

view組件的是自適應的，通常情況下，寬度是100%，高度就是你指定容器的高度，高度是自適應的，隨着你的指定的容器的大小而變化

（3）justify-content屬性

主要是來控制子元素的對齊方式的

justify-content: flex-end;// 向下對齊

justify-content: flex-start; // 向上對齊

justify-content: center;//居中對齊

justify-content: space-between;// 頭尾靠邊 然后中間元素等距排列 相當於平均分布

justify-content: space-around;// 等距分布 頭尾不靠邊 子元素兩邊的元素距離是相等的

（4）flex中的主軸和交叉軸

這個可以從一個例子中來理解，就是子元素既在水平方向居中又在垂直方向居中的情況

align-items: center; // 交叉軸方向

justify-content: center; // 主軸方向

（5）flex中的換行

在flex布局中，flex的處理是自動會適應屏幕的寬度。來縮小你子元素的寬度，如何能子元素保持設定的大小，就需要換行了，在flex中，自動換行的元素是flex-wrap

flex-wrap:wrap;// 自動換行

flex-wrap:nowrap;// 默認不換行

 

內容出處：七月老師《純正商業級小程序開發》視頻課程

視頻課程鏈接：https://coding.imooc.com/class/251.html