微信小程序大賽視頻：http://www.xuetangx.com/courses/course-v1:TsinghuaX+2018032801X+2018_T1/courseware/c2f469d596604d1cb39c5df4650ddb4c/cf82bc63cafb4897833c6396687934b2/javascript
一、建立小程序，步驟略。一個郵箱只能建一個小程序。css
二、建立小程序代碼html
三、打開代碼的目錄結構：java
（1）目錄由app和各個page組成。app是項目的入口。app.json以下配置中，pages中第一個頁面默認爲項目啓動頁json
（2）每一個page模塊包含四個文件：小程序
.js --js文件 .json --配置文件 .wxss --css樣式 .wxml --結構相似html
（3）配置每一個頁面的標題：微信小程序
注意：navigationBarTextStyle的值只能是white和black，即：標題的文字顏色只能是白色和黑色微信
四、view、text、imge組件微信開發
text常見屬性：<text class="info" id="ddd" style="" bindtap="f0" hidden="" data-user-name="user">Hello World</text>
要注意的地方，看註釋 <view><!-- 相似html的div --> <!-- （1）圖片用image，而不是img，並且小程序所有是成對的標籤，沒有但標籤的概念 --> <!-- （2）圖片地址？和html有點不同，html沒有第一個/,直接是images/logo.jpg，但此處沒有第一個/不顯示圖片 --> <image src="/images/logo.jpg"></image> <text>電影週週看</text><!-- 相似html的span --> <text>我每週推薦一部好片</text> <text>個人微博：weibo.com/simbasong</text> </view>
效果以下：app
五、快速實現基本佈局-應用彈性盒子佈局（傳統的css高寬居中等屬性也可實現想要的功能，可是兼容性不太好，不一樣尺寸的頁面展現不必定一致）
<view><!-- 這裏教學視頻裏用的 class="container"，而後用.container設置彈性佈局，可是不起做用，直接用view寫樣式就能夠 --> <image src="/images/logo.jpg"></image> <text>電影週週看</text> <text>我每週推薦一部好片</text> <text>個人微博：weibo.com/simbasong</text> <text>aa</text> <text>aa</text> </view>
view{
background-color: #ccc;
height:100vh;
display: flex;/*彈性盒子佈局*/
flex-direction: column;/*和視頻不一致，我不寫這個也是一行行的，不是一列列的？*/
justify-content: space-around;
align-items: center;/*默認就居中了*/
}
後來發現：爲何。container不起做用呢？由於我這個項目的app.wxss中，已經有這個樣式了，衝突了。可是視頻裏面app.wxss啥也沒有
因此，能夠刪除app.wxss裏面的內容，所有刪掉，about中把view換成.container就能夠了;
或者！！將app.wxss裏面container中的樣式換成about中的內容，樣式就能夠用於全局了
六、讓元素大小適配不一樣寬度屏幕
（1）全部的小程序寬高都是750rpx
（2）px是絕對單位，就像釐米，設置寬350px，不論是iphone四、iphone六、魅族、小米，都是2px，那不一樣的手機寬度展現出來的效果就有可能不同，有居中的，有靠左的
rpx是一個相對的單位，全部手機在小程序寬高都是750rpx，設置成350rpx，就是相對原來的750rpx，換算事後，每一個手機展現的位置都應該是350/750*當前手機寬度（我是這樣理解的，不知對否）
（3）px : rpx = 1：2
例如設置字體大小是30px，也能夠用rpx的單位，那就是30px * 2 = 60rpx
修改代碼以下：
<view> <image src="/images/logo.jpg"></image> <text style="font-weight:bolder;font-size:60rpx;">電影週週看</text> <text>我每週推薦一部好片</text> <text>個人微博：weibo.com/simbasong</text> </view>
.container image{
width:375rpx;
height:375rpx;
border-radius: 50%;/*方圖變圓圖*/
}
效果下：
七、新增每週推薦頁面
（1）新建weekly目錄和4個文件。在json文件中加大括號{ }，不然報錯
（2）在app.json中添加weekly的訪問地址，並放在第一個，不然暫時沒有這個頁面的入口，不方便調試
-------有個bug須要處理：微信開發工具輸入不了中文了？？！--------------------------------------
| 問題模塊 | 框架類型 | 問題類型 | 操做系統 | 工具版本 |
|---|---|---|---|---|
| 開發者工具 | 小程序 | Bug | Windows | v1.02.1904042 |
異常描述：
沒法輸入中文，偶現，可是機率有點高，重啓，重裝，更新版本等等都未解決問題。
處理方法：
找到了另外一個提出一樣問題的帖子，官方回覆說是bug：
經驗證， ctrl(command) + shfit + w 重啓下項目，是可行的.
轉自：https://www.cnblogs.com/xyyt/p/10005947.html
----------------------------------------------------------------------------------------------------
（3）wxml內容
<view class="container"><!-- 樣式已經放在app.wxss全局，直接應用便可--> <text>本週推薦</text> <image src='/images/jf.jpg'></image><!-- 別忘了往images目錄下面放張jf.jpg圖片 --> <text>教父</text> <text>點評：最精彩的劇本，最真實的黑幫電影</text> </view>
weekly.json中給設置下頁面標題：
{
"navigationBarTitleText": "本週推薦",
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "white"
}
八、使用navigator組件-從ABOUT頁跳轉到WEEKLY頁
display: inlne不起做用？？！！必須將在一行的文字都放在view中
<view class='container'>
<image src="/images/logo.jpg"></image>
<text style="font-weight:bolder;font-size:60rpx;">電影週週看</text>
<view>
<text>我</text>
<!-- 此時可使用返回回到此頁面 -->
<navigator url="/pages/weekly/weekly" style="display: inline;" class="nav-default" hover-class="nav-hover">每週推薦</navigator><text>一部好片</text>
</view>
<navigator
url="/pages/weekly/weekly"
style='display: inlne;'
open-type="redirect" <!-- 跳轉新頁面後，不能返回此上一頁了，默認值是navigate -->
hover-class="other-navigator-hover">
在當前頁打開
</navigator>
<text>個人微博：weibo.com/simbasong</text>
</view>
hover-class：鼠標點擊時的樣式；可是當navigate指定class之後，都是對顏色設置，必須hover-class放後面
.nav-default{/* 要想hover-class用的nav-hover顏色起做用，必須將css代碼放在下面 */
color:blue;
}
.nav-hover{
color:red;
}
九、配置TabBar
app.json中添加tab頁面
{
"pages": [
"pages/about/about",
"pages/weekly/weekly",
"pages/index/index",
"pages/logs/logs"
],
"tabBar":{
"list": [
{
"text":"每週推薦",
"pagePath":"pages/weekly/weekly",
"iconPath":"images/icons/weekly.png",
"selectedIconPath":"images/icons/weekly-selected.png"
},
{
"text": "關於",
"pagePath": "pages/about/about",
"iconPath": "images/icons/about.png",
"selectedIconPath": "images/icons/about-selected.png"
}
],
"color":"#000",//文本的顏色
"selectedColor":"#00f"//選中後tab中文本顏色
}
}
但此時about.wxml中的navigator不行了。須要open-type="switchTab"值，由於當你點擊跳轉後，下面的tab頁面也是要改變的
十、配置全局的導航欄樣式
將全局配置放在app.json的window中
"window":{
"navigationBarBackgroundColor": "#000",//每一個導航欄的背景色
"navigationBarTextStyle": "white"//每一個導航欄的文字顏色
},