第1 章什么是小程序？

1. 2017 年度百度百科十大熱詞之一

2. 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用 ( 張小龍對其的定義是無需安裝，用完即走，實際上是需要安裝的，只不過小程序的體積特別小，下載速度很快，用戶感覺不到下載的過程)

3. 小程序剛發布的時候要求壓縮包的體積不能大于1M,，否則無法通過，在2017 年4 月做了改進，由原來的1M 提升到2M；

4. 2017 年1 月9 日0 點，萬眾矚目的微信第一批小程序正式低調上線。

第2 章小程序可以干什么？

1. 同App 進行互補，提供同app 類型的功能，比app 使用方便簡潔

2. 通過掃一掃或者在微信搜索即可下載

3. 用戶使用頻率不高，但又不得不用的功能軟件，目前看來小程序是首選

4. 連接線上線下

5. 開發門檻低，成本低

第3 章小程序開發資料

3.1 相關資料

1) 官網：微信公眾平臺

2) 微信開發工具

3) 下載地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

第4 章開發小程序儲備知識

4.1 Flex 布局簡介

4.1.1 什么是flex 布局？

1) Flex 是Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

2) 任何一個容器都可以指定為Flex 布局。

3) display: ‘flex’

4.1.2 flex 屬性

1) flex-direction:

row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

學習教程：Flex 布局語法教程 | 菜鳥教程

4.2 小程序適配方案: rpx (responsive pixel 響應式像素單位)

a) 小程序適配單位：rpx

b) 規定任何屏幕下寬度為750rpx

c) 小程序會根據屏幕的寬度不同自動計算rpx 值的大小

d) Iphone6 下：1px = 2rpx

4.3 什么是JSON數據格式：

JSON(JavaScript Object Notation)是一種輕量級的數據交換格式，"名稱/值"對的集合，在不同的語言中被理解為對象(Object)。

詳細概念學習：https://www.cnblogs.com/abella/p/11125685.html

一、程序安裝

1)：百度搜素“微信公眾平臺”，進行開發賬號注冊，如下圖所示：

2)：注冊完畢后，依次選擇“開發”->“工具”->“下載”,根據機器操作系統類型，選擇相應的開發工具軟件，如下圖所示：

3)：右鍵以管理員身份運行下載的工具安裝文件，然后點擊“下一步”，如下圖所示：

4)：直至安裝結束，點擊“完成”，如下圖所示：

二、設置頁頭頁尾導航欄

1)：找到app.json文件

2）：設置頁頭中的背景顏色/名字/字體顏色

3）：設置頁尾導航

①:設置底部導航欄文字顏色/選中顏色/背景顏色

②:設置底部導航欄中第一個屬性的頁面路徑/圖片/選中時候圖片/文字

③:設置第二個屬性的頁面路徑/圖片/選中時候圖片/文字

④:設置第三個屬性的頁面路徑/圖片/選中時候圖片/文字

注:底部導航欄最少要有2個!

三、主頁面輪播圖

1):新建主頁面

在app.json中pages里可以新增頁面

①:頁面的js文件,是頁面的生命周期,主要是用來請求api數據/處理數據/執行按鈕事件等

②:json文件是用來處理json數據，一般用來做配置

③:.wxml是用來顯示頁面內容,綁定/顯示數據

④:wxss頁面樣式文件

2):輪播圖樣式

.view{background-color: #3a3a3a;min-height: 100%; } .swiper{height: 400rpx; } .item{height: 400rpx;width: 100%; }

3):在js文件中設置圖片路徑

4):wxml頁面樣式布局

四、調用豆瓣api接口顯示數據

①:發起數據請求

②:設置請求的URL地址（https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a）

③:設置請求的數據格式

④:得到請求的數據

⑤:把請求過來的數據保存到數組中,并且發送到前臺頁面

注:初始請求的代碼必須放在onload中,請求的參數不能少!

1):得到請求結果

①:得到的數據是一個對象集合,里面存放著每條數據,頁面上就是顯示這些數據!

五、頁面顯示豆瓣電影數據

1):顯示電影的圖片

2):設置圖片的樣式

3):頁面顯示如下所示

4):顯示右側電影信息

①:頁面樣式代碼

②:最終結果如下:

六、電影推薦功能

1):數據請求頁面

url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=中國'

注:默認顯示中國電影數據,如果想看其他地區的,可以修改地區!

2):頁面內容

3):頁面樣式

4):頁面顯示結果

5）：顯示下拉列表

①:設置下拉列表樣式

②:設置下拉列表樣式

/* 輸入框內字體大小 */ .select_text{font-size: 30rpx; } /* 下拉列表圖片 */ .select_img{width: 40rpx;height: 40rpx;display: block;transition:transform 0.3s;margin-left: 260px; } /* 搜索框的樣式 */ .select_box{background: #fff;width: 100%;/* 相對定位 */position: relative; } .select{width: 100%;height: 70rpx;border:1px solid #efefef;border-radius: 8rpx;display: flex;align-items: center;padding: 0 20rpx; }

顯示默認數據：

③:顯示結果

④:點擊下拉圖片觸發事件

selectTap(){this.setData({show: !this.data.show});},

show:false,//控制下拉列表的顯示隱藏，false隱藏、true顯示

⑤:下拉列表的內容

⑥：下拉列表內容js代碼

⑦：下拉列表樣式

.option_box{position: absolute;top: 70rpx;width: 100%;border:1px solid #efefef;box-sizing: border-box;overflow-y: auto;background: #fff;/* 點擊下拉列表顯示動畫特效 */transition: height 0.3s; } .option{display: block;line-height: 40rpx;font-size: 30rpx;border-bottom: 1px solid #efefef;padding: 10rpx; }

⑧：具體結果

⑨：選中下拉列表得到結果

// 點擊下拉列表 optionTap(e){let Index=e.currentTarget.dataset.index;//獲取點擊的下拉列表的下標this.setData({index:Index,show:!this.data.show});if(Index==1){//所有調用電影的數據，必須寫在這里var page=this;// wx.request:請求豆瓣電影數據wx.request({url: 'https://movie.douban.com/j/search_subjects?type=movie&tag=臺灣',header:{'Content-Type':'json'},success:function(res){var result=res.data.subjects;console.log(result)page.setData({movies:result});}})}

七、點擊顯示電影詳情頁面

1):在app.js之中設置跳轉

2):在recommand.js頁面中添加detail事件

八、顯示電影詳情數據

1):根據ID查詢電影詳情數據（https://movie.querydata.org/api?id=）

2):顯示詳情數據

3):頁面代碼

4):樣式代碼

5):顯示結果

九、電影查詢

1):頁面內容

2):頁面樣式

3):顯示結果

十、顯示搜索結果

1):頁面內容

2):頁面樣式

.inputShow{padding-left: 35px;color: white;font-size: 12px;}

3):如何在下面實時獲取文本框的內容

inputShow(e){this.setData({inputVal:e.detail.value})},

4):顯示搜索結果

十一、顯示搜索的電影

1):頁面js代碼（https://m.maoyan.com/ajax/search?stype=0&cityId=59&kw=）

2):顯示json數據

3):頁面內容顯示

4):頁面樣式

/* 1px=0.07毫米 *//* //movie-info:圖片和電影信息之間的間距 */.movie-info{color: #FFFFFF;font-size: 12px;padding-top: 20px;line-height: 20px;margin-left: 30px;} .SearchButton{background-color: #DD5E0E;color: white;font-size: 17px;height: 54rpx;line-height: 54rpx;}

5):頁面顯示結果

十二、點擊查看詳情

1):頁面代碼：

<view class="main"><view class="hr"></view><image src="{{film.img}}" class="img" mode="widthFix"></image><view class="hr"></view><text>電影名稱：{{film.nm}}</text><view class="hr"></view><text>電影類型：{{film.cat}}</text><view class="hr"></view><text>主要演員：{{film.star}}</text><view class="hr"></view><text>上映地區：{{film.src}}</text><view class="hr"></view><text>上映時間：{{film.pubDesc}}</text><view class="hr"></view><text>電影預告：</text><video src="{{film.vd}}" style="width: 100%;"></video><view class="hr"></view><text>電影描述：{{film.dra}}</text><view class="hr"></view> </view>

2): 樣式代碼：

.main{background-color: rgba(32, 30, 30, 0.726);color: white; }.hr{height: 5rpx;border-top: 1rpx solid white;border-bottom: 1rpx solid white;width: 100%; } .img{width: 100%; }

3): js代碼（https://m.maoyan.com/ajax/detailmovie?movieId=）

/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {var page = this;var id = options.id;wx.request({url: 'https://m.maoyan.com/ajax/detailmovie?movieId='+id,header:{},success:function(res){page.setData({film:res.data.detailMovie});}})}

4): 查詢詳情效果圖

總結

以上是生活随笔為你收集整理的零基础一天学会豆瓣电影微信小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。