第1 章什么是小程序？

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

2. 微信小程序，簡(jiǎn)稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用 ( 張小龍對(duì)其的定義是無(wú)需安裝，用完即走，實(shí)際上是需要安裝的，只不過(guò)小程序的體積特別小，下載速度很快，用戶感覺(jué)不到下載的過(guò)程)

3. 小程序剛發(fā)布的時(shí)候要求壓縮包的體積不能大于1M,，否則無(wú)法通過(guò)，在2017 年4 月做了改進(jìn)，由原來(lái)的1M 提升到2M；

4. 2017 年1 月9 日0 點(diǎn)，萬(wàn)眾矚目的微信第一批小程序正式低調(diào)上線。

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

1. 同App 進(jìn)行互補(bǔ)，提供同app 類型的功能，比app 使用方便簡(jiǎn)潔

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

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

4. 連接線上線下

5. 開(kāi)發(fā)門檻低，成本低

第3 章小程序開(kāi)發(fā)資料

3.1 相關(guān)資料

1) 官網(wǎng)：微信公眾平臺(tái)

2) 微信開(kāi)發(fā)工具

3) 下載地址

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

第4 章開(kāi)發(fā)小程序儲(chǔ)備知識(shí)

4.1 Flex 布局簡(jiǎn)介

4.1.1 什么是flex 布局？

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

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

3) display: ‘flex’

4.1.2 flex 屬性

1) flex-direction:

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。row-reverse：主軸為水平方向，起點(diǎn)在右端。

column：主軸為垂直方向，起點(diǎn)在上沿。

column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

學(xué)習(xí)教程：Flex 布局語(yǔ)法教程 | 菜鳥(niǎo)教程

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

a) 小程序適配單位：rpx

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

c) 小程序會(huì)根據(jù)屏幕的寬度不同自動(dòng)計(jì)算rpx 值的大小

d) Iphone6 下：1px = 2rpx

4.3 什么是JSON數(shù)據(jù)格式：

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

詳細(xì)概念學(xué)習(xí)：https://www.cnblogs.com/abella/p/11125685.html

一、程序安裝

1)：百度搜素“微信公眾平臺(tái)”，進(jìn)行開(kāi)發(fā)賬號(hào)注冊(cè)，如下圖所示：

2)：注冊(cè)完畢后，依次選擇“開(kāi)發(fā)”->“工具”->“下載”,根據(jù)機(jī)器操作系統(tǒng)類型，選擇相應(yīng)的開(kāi)發(fā)工具軟件，如下圖所示：

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

4)：直至安裝結(jié)束，點(diǎn)擊“完成”，如下圖所示：

二、設(shè)置頁(yè)頭頁(yè)尾導(dǎo)航欄

1)：找到app.json文件

2）：設(shè)置頁(yè)頭中的背景顏色/名字/字體顏色

3）：設(shè)置頁(yè)尾導(dǎo)航

①:設(shè)置底部導(dǎo)航欄文字顏色/選中顏色/背景顏色

②:設(shè)置底部導(dǎo)航欄中第一個(gè)屬性的頁(yè)面路徑/圖片/選中時(shí)候圖片/文字

③:設(shè)置第二個(gè)屬性的頁(yè)面路徑/圖片/選中時(shí)候圖片/文字

④:設(shè)置第三個(gè)屬性的頁(yè)面路徑/圖片/選中時(shí)候圖片/文字

注:底部導(dǎo)航欄最少要有2個(gè)!

三、主頁(yè)面輪播圖

1):新建主頁(yè)面

在app.json中pages里可以新增頁(yè)面

①:頁(yè)面的js文件,是頁(yè)面的生命周期,主要是用來(lái)請(qǐng)求api數(shù)據(jù)/處理數(shù)據(jù)/執(zhí)行按鈕事件等

②:json文件是用來(lái)處理json數(shù)據(jù)，一般用來(lái)做配置

③:.wxml是用來(lái)顯示頁(yè)面內(nèi)容,綁定/顯示數(shù)據(jù)

④:wxss頁(yè)面樣式文件

2):輪播圖樣式

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

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

4):wxml頁(yè)面樣式布局

四、調(diào)用豆瓣api接口顯示數(shù)據(jù)

①:發(fā)起數(shù)據(jù)請(qǐng)求

②:設(shè)置請(qǐng)求的URL地址（https://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a）

③:設(shè)置請(qǐng)求的數(shù)據(jù)格式

④:得到請(qǐng)求的數(shù)據(jù)

⑤:把請(qǐng)求過(guò)來(lái)的數(shù)據(jù)保存到數(shù)組中,并且發(fā)送到前臺(tái)頁(yè)面

注:初始請(qǐng)求的代碼必須放在onload中,請(qǐng)求的參數(shù)不能少!

1):得到請(qǐng)求結(jié)果

①:得到的數(shù)據(jù)是一個(gè)對(duì)象集合,里面存放著每條數(shù)據(jù),頁(yè)面上就是顯示這些數(shù)據(jù)!

五、頁(yè)面顯示豆瓣電影數(shù)據(jù)

1):顯示電影的圖片

2):設(shè)置圖片的樣式

3):頁(yè)面顯示如下所示

4):顯示右側(cè)電影信息

①:頁(yè)面樣式代碼

②:最終結(jié)果如下:

六、電影推薦功能

1):數(shù)據(jù)請(qǐng)求頁(yè)面

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

注:默認(rèn)顯示中國(guó)電影數(shù)據(jù),如果想看其他地區(qū)的,可以修改地區(qū)!

2):頁(yè)面內(nèi)容

3):頁(yè)面樣式

4):頁(yè)面顯示結(jié)果

5）：顯示下拉列表

①:設(shè)置下拉列表樣式

②:設(shè)置下拉列表樣式

/* 輸入框內(nèi)字體大小 */ .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%;/* 相對(duì)定位 */position: relative; } .select{width: 100%;height: 70rpx;border:1px solid #efefef;border-radius: 8rpx;display: flex;align-items: center;padding: 0 20rpx; }

顯示默認(rèn)數(shù)據(jù)：

③:顯示結(jié)果

④:點(diǎn)擊下拉圖片觸發(fā)事件

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

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

⑤:下拉列表的內(nèi)容

⑥：下拉列表內(nèi)容js代碼

⑦：下拉列表樣式

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

⑧：具體結(jié)果

⑨：選中下拉列表得到結(jié)果

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

七、點(diǎn)擊顯示電影詳情頁(yè)面

1):在app.js之中設(shè)置跳轉(zhuǎn)

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

八、顯示電影詳情數(shù)據(jù)

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

2):顯示詳情數(shù)據(jù)

3):頁(yè)面代碼

4):樣式代碼

5):顯示結(jié)果

九、電影查詢

1):頁(yè)面內(nèi)容

2):頁(yè)面樣式

3):顯示結(jié)果

十、顯示搜索結(jié)果

1):頁(yè)面內(nèi)容

2):頁(yè)面樣式

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

3):如何在下面實(shí)時(shí)獲取文本框的內(nèi)容

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

4):顯示搜索結(jié)果

十一、顯示搜索的電影

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

2):顯示json數(shù)據(jù)

3):頁(yè)面內(nèi)容顯示

4):頁(yè)面樣式

/* 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):頁(yè)面顯示結(jié)果

十二、點(diǎn)擊查看詳情

1):頁(yè)面代碼：

<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>上映地區(qū)：{{film.src}}</text><view class="hr"></view><text>上映時(shí)間：{{film.pubDesc}}</text><view class="hr"></view><text>電影預(yù)告：</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=）

/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/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): 查詢?cè)斍樾Ч麍D

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。