在知乎上，有人提問(wèn)“如何使用 Python 開發(fā)微信小程序”。
其實(shí)微信小程序作為一個(gè)前端的機(jī)制，Python 并不能插上邊。只不過(guò)可以作為后端接口為微信小程序提供數(shù)據(jù)服務(wù)而已。
那么在本篇，我們就將結(jié)合微信小程序開發(fā)與 Python Web 開發(fā)，來(lái)完成一個(gè)朋友圈神器微信小程序的開發(fā)，這個(gè)微信小程序作為一個(gè)工具型的應(yīng)用，供用戶輸入姓名或其他字段，生成一個(gè)帶有炫耀成分的照片。
比如，移民申請(qǐng)表照片：
高額工資單照片：
豪車訂單照片：
下面，就開干吧！
開發(fā)微信小程序，首先肯定需要去微信公眾平臺(tái)上注冊(cè)一個(gè)微信小程序了，我們?cè)谖⑿殴娖脚_(tái)的注冊(cè)頁(yè)面選擇“小程序”進(jìn)行注冊(cè)。
接著有三個(gè)步驟：郵箱注冊(cè)、郵箱激活和信息登記：
完成上述三個(gè)步驟后，就可以登錄進(jìn)入管理中心：
在基本設(shè)置中，我們可以設(shè)置微信小程序的名稱、頭像、說(shuō)明等基本信息。
在開發(fā)設(shè)置中，我們可以獲取到小程序的 AppID 和 AppSecret，這在后續(xù)的開發(fā)中會(huì)使用到，同時(shí)我們可以在此設(shè)置小程序服務(wù)器的域名：
開發(fā)微信小程序需要使用到微信 Web 開發(fā)工具這一軟件。我們下載并安裝好。
啟動(dòng)之后，需要我們使用微信掃碼進(jìn)行登錄：
之后，新建一個(gè)小程序項(xiàng)目：
指定小程序的項(xiàng)目目錄、輸入小程序的 AppID（管理頁(yè)面中獲?。?、輸入項(xiàng)目名稱，之后我們就進(jìn)入了微信開發(fā)工具的主界面了：
因?yàn)槲覀兪褂昧丝焖賳?dòng)的模板，所以自動(dòng)生成了一個(gè) Hello World 的 Demo。接下來(lái)，我們創(chuàng)建我們的票圈神器的小程序頁(yè)面。
在創(chuàng)建小程序的頁(yè)面之前，我們先來(lái)了解一下微信小程序的代碼結(jié)構(gòu)。
根據(jù)微信小程序開發(fā)文檔的介紹：小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁(yè)面的 page。
一個(gè)小程序主體部分由以下三個(gè)文件組成，必須放在項(xiàng)目的根目錄。
同時(shí)，一個(gè)小程序的頁(yè)面由四個(gè)文件組成：
微信小程序的視圖層負(fù)責(zé)頁(yè)面的展示，由 WXML 文件描述頁(yè)面結(jié)構(gòu)和 WXSS 文件描述頁(yè)面的樣式。
WXML 和 WXSS 是什么東西呢？我們可以拿 HTML 和 CSS 來(lái)與之進(jìn)行類比。雖然它們不一樣，但是它們真的很相似。
WXML 是一套微信定義的可嵌套的標(biāo)記語(yǔ)言，而 WXSS 則具備 CSS 的大部分特性，并對(duì) CSS 進(jìn)行了擴(kuò)充和修改。
接下來(lái)我們來(lái)規(guī)劃一下我們的小程序的頁(yè)面構(gòu)成：
首先，我們?cè)陧?xiàng)目目錄結(jié)構(gòu)的 pages 路徑下新建一個(gè) detail 目錄，其下包含三個(gè)同名的 JS 文件、WXML 文件、WXSS 文件；一個(gè) result 目錄，其下包含三個(gè)同名的 JS 文件、WXML 文件、WXSS 文件；最后 pages 目錄下的結(jié)構(gòu)如下圖所示：
然后，在創(chuàng)建的 JS 文件中輸入以下代碼：
Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }})Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，以指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
使用微信開發(fā)者工具的智能提示可以快速生成這些代碼：
完成這一步之后，我們打開項(xiàng)目根目錄的 app.json 文件：
在pages列表中添加如下代碼：
"pages/detail/detail","pages/result/result",最后 app.json 文件中 pages 列表的值應(yīng)該為：
[ "pages/index/index", "pages/detail/detail", "pages/result/result", "pages/logs/logs" ],首先，我們?cè)诹斜眄?yè)面放置一個(gè)輪播圖，讓我們的頁(yè)面不顯單調(diào)。準(zhǔn)備三張圖片：
在項(xiàng)目根路徑下新建一個(gè)名為 imgs 的目錄，將三張輪播圖片復(fù)制進(jìn)去：
在 index.js 文件的 Page 實(shí)例中，在 data 字典添加一個(gè)鍵值對(duì)，用于指定本地輪播圖片的位置：
刪除 index.wxml 文件中的所有代碼，輸入以下代碼以創(chuàng)建一個(gè)輪播圖：
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{headimg}}" wx:for-index="index"> <swiper-item> <image src="{{item.url}}" class="slide-image" mode="aspectFill"/> </swiper-item> </block> </swiper>其中：
我們可以看到，在 block 標(biāo)簽中，我們?yōu)槠湓O(shè)置了 wx:for 屬性，這個(gè)屬性用于列表渲染，綁定了 Page 的 data 中的 headimg 數(shù)組（在微信小程序中，WXML 中的動(dòng)態(tài)數(shù)據(jù)都來(lái)自于對(duì)應(yīng) JS 文件 Page 中的 data 數(shù)據(jù)）。
接著，調(diào)整輪播圖的樣式，在 index.wxss 文件中輸入以下代碼：
.swiper { height: 400rpx; width: 100%;}.swiper image { height: 100%; width: 100%;}最后保存文件，在微信開發(fā)者工具中可以預(yù)覽到我們的輪播圖已經(jīng)創(chuàng)建成功：
創(chuàng)建完輪播圖之后，我們繼續(xù)編輯創(chuàng)建圖片列表結(jié)構(gòu)。
<view class="temp_box"> <block wx:for="{{templist}}"> <view class="temp_item"> <navigator url="../detail/detail?tid={{item.id}}"> <image src="https://www.huabandata.com/{{item.icon}}"></image> <view class="content"> <text>{{item.name}}</text> </view> </navigator> </view> </block></view>在頁(yè)面的列表結(jié)構(gòu)中，我們使用一個(gè) view 標(biāo)簽作為外部容器，里面定義了一個(gè) block 標(biāo)簽用于遍歷圖片模板數(shù)據(jù)生成多個(gè)圖片信息，定義渲染的數(shù)組為 templist，這個(gè)我們將在 index.js 文件中進(jìn)行定義和聲明。
同時(shí)使用了 navigator 標(biāo)簽，用于頁(yè)面的跳轉(zhuǎn)，設(shè)置一個(gè)參數(shù) tid 并將模板的 id 作為值，使其能夠跳轉(zhuǎn)到具體模板的詳情頁(yè)面。
然后在 index.wxss 文件中添加以下樣式：
/* 模板圖片列表 */.temp_box { margin: 3px; width: 100%;}.temp_item { display: inline-block; width: 48%; margin: 0.5%; background-color: white;}.temp_item image { width: 100%; height: 160px;}.temp_item .content { width: 100%; height: 32px; margin: 5px;}.temp_item .content text { font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}如果 templist 數(shù)組有合適的數(shù)據(jù)，那么其渲染出來(lái)的頁(yè)面應(yīng)該是下面這樣的：
詳情頁(yè)面相較于列表頁(yè)面簡(jiǎn)單很多，由兩個(gè)結(jié)構(gòu)組成：
所以我們的詳情頁(yè)面 detail.wxml 的結(jié)構(gòu)為：
<view class='temp'> <image src='https://www.xxx.com/{{tempData.img}}'></image></view><form bindsubmit='generate'> <view class="form"> <view class='li'> <image class='icon' src='http://www.xxx.com/media/resume/icon_user.png'></image> <input class='input' placeholder='請(qǐng)輸入{{tempData.hint}}' name='content'></input> </view></view><button class="button" form-type='submit'>立刻生成照片</button></form>在這里，我們通過(guò) <view> 標(biāo)簽包裹著 <image> 標(biāo)簽來(lái)顯示圖像，然后用一個(gè) form 表單標(biāo)簽包裹著 input 輸入框和 button 提交按鈕。
在 button 按鈕中，我們通過(guò)設(shè)置 form-type 屬性為 submit，使得點(diǎn)擊這個(gè)按鈕時(shí)會(huì)提交表單。
表單的提交處理由 <form> 標(biāo)簽的 bindsubmit 屬性來(lái)控制，在此我們指定了處理函數(shù)為 generate，我們將在 detail.js 中對(duì) generate 函數(shù)進(jìn)行定義。
然后，在 detail.wxss 中對(duì)其進(jìn)行樣式設(shè)計(jì)：
page{background-color: #efeff4}.temp{ background-color: white; border: #e5e5e5 solid 1px; display: flex; align-items: center; justify-content:center;}.temp image{ height: 320px;}.form{ margin-top: 20rpx; background-color: white; border: #e5e5e5 solid 1px; border-right: none; border-left: none; }.li{ height: 100rpx; border-bottom: #e5e5e5 solid 1px; width: 90%; margin: auto; display: flex; align-items: center }.input{padding-left: 20rpx; width: 94%; color: black}.icon{ width: 50rpx; height: 50rpx;}.button{ background-color: #09bb07; margin: auto; margin-top:20rpx; margin-bottom: 20rpx; width: 90%; color: white }如果 tempData 數(shù)組中有正確的數(shù)據(jù)，那么詳情頁(yè)面的顯示效果如下所示：
結(jié)果頁(yè)面與詳情頁(yè)面類似，同樣是顯示一個(gè)圖片，和一個(gè)按鈕（用于保存照片至本地），所以將 detail 頁(yè)面的結(jié)構(gòu)和樣式稍作修改即可。
result.wxml：
<view class='temp'> <image src='https://www.xxx.com/{{imgurl}}'></image></view><button class="button" form-type='submit' bindtap='savePhoto'>保存照片</button>reault.wxss：
page{background-color: #efeff4}.temp{ background-color: white; border: #e5e5e5 solid 1px; display: flex; align-items: center; justify-content:center;}.temp image{ height: 320px;}.button{ background-color: #09bb07; margin: auto; margin-top:20rpx; margin-bottom: 20rpx; width: 90%; color: white }如果 imgurl 數(shù)組有正確的數(shù)據(jù)，那么結(jié)果頁(yè)面的顯示效果如下所示：
在小程序的頁(yè)面創(chuàng)建和設(shè)計(jì)好之后，我們需要?jiǎng)?chuàng)建一個(gè) API 數(shù)據(jù)接口，供小程序請(qǐng)求獲取，以生成供 WXML 頁(yè)面進(jìn)行渲染的數(shù)組。
因?yàn)楸酒v的是《Python 開發(fā)者的微信小程序開發(fā)實(shí)踐》，自然使用的是 Python 語(yǔ)言，而我對(duì) Django 相對(duì)比較熟悉，所以我們使用的是 Django 框架來(lái)對(duì)小程序提供 API 接口。
我已經(jīng)有一個(gè) Django 項(xiàng)目在運(yùn)行，所以在此直接在此項(xiàng)目下創(chuàng)建 Django App:
python3 manage.py startapp pyq_tool要生成一張那樣可用來(lái)炫耀的圖片，其實(shí)很簡(jiǎn)單，利用圖像處理模塊，在圖片上添加相應(yīng)字體的文字即可。
在 Python 中，我們使用 PIL 模塊對(duì)圖像進(jìn)行處理，其可以通過(guò) pip 命令進(jìn)行安裝：
pip install pillow下面我們介紹一下使用 PIL 庫(kù)生成一張裝 X 圖片的過(guò)程：
（1）引入核心模塊：
from PIL import Image,ImageDraw,ImageFont其中，Image 是圖像類的包裝器，ImageDraw 用于對(duì)圖片界面進(jìn)行操作，ImageFont 用于進(jìn)行光柵字體管理。
（2）根據(jù)圖片大小，創(chuàng)建一個(gè)新的圖像：
bg = Image.new("RGB",(640,853))（3）打開圖片：
im = Image.open(r"toutu3.jpg")（4）合并兩個(gè)圖片為一個(gè)新的圖像：
draw2 = Image.blend(bg,im,1.0)（5）創(chuàng)建一個(gè)圖像繪制對(duì)象：
draw = ImageDraw.Draw(draw2)（6）添加一個(gè)字體并指定字體大小：
ttfont = ImageFont.truetype(r"gb.ttf",30)（7）在圖像繪制對(duì)象中添加文字：
draw.text((230,120),'州的現(xiàn)實(shí)', fill=(20,20,20),font=ttfont)（8）最后顯示圖像：
draw2.show()這樣，我們就使用 Python 的 PIL 模塊完成了圖像的操作從而制作出了一個(gè)新的圖像，結(jié)果為：
如果我們需要保存圖像，則第8步改成：
draw2.save()根據(jù)上面生成照片的代碼，我們可以發(fā)現(xiàn)不同照片之間共同的部分和不同的部分，共同的部分就是代碼的結(jié)構(gòu)和圖像處理的邏輯，不同的部分則是圖片、圖片的大小，字體的類型和大小，文本的內(nèi)容和顏色等。
將這些不同之處，提取出來(lái)，我們可以創(chuàng)建一個(gè)數(shù)據(jù)模型用于保存不同模板圖片的信息，以根據(jù)不同的模板，使用同一臺(tái)代碼生成不同的照片。所以，我們?cè)?pyq_tool 目錄下的 models.py 文件中創(chuàng)建一個(gè)數(shù)據(jù)模型來(lái)保存不同模板圖片的數(shù)據(jù)：
from django.db import models# Create your models here.class Tempinfo(models.Model): name = models.CharField(max_length=20,verbose_name="模板名稱") font = models.CharField(max_length=5,verbose_name='字體代碼') fontsize = models.IntegerField(verbose_name="字體大小") img = models.ImageField(upload_to='pyq_tool',verbose_name="模板圖片") imgsize = models.CharField(max_length=10,verbose_name='圖片大小') icon = models.ImageField(upload_to='pyq_tool',verbose_name="圖標(biāo)") hint = models.CharField(max_length=10,verbose_name="輸入提示") textcolor = models.CharField(max_length=15,verbose_name='文本顏色') textplace = models.CharField(max_length=10,verbose_name='文本位置') text2 = models.CharField(max_length=15,verbose_name='日期文本',null=True,blank=True) text2hint = models.CharField(max_length=10,verbose_name="文本2提示",null=True,blank=True) text2place = models.CharField(max_length=10,verbose_name='日期位置',null=True,blank=True) def __str__(self): return self.name class Meta: verbose_name = '票圈神器' verbose_name_plural = verbose_name然后將 pyqtool 添加進(jìn) settings.py 文件中的 INSTALLEDAPPS 列表中，使用 makemigrations 和 migrate 命令生成數(shù)據(jù)模型。最后，每一個(gè)圖片模板的信息如下圖所示：
根據(jù)收集好的裝 X 圖片模板，向數(shù)據(jù)庫(kù)中添加幾條數(shù)據(jù)：
在數(shù)據(jù)庫(kù)中有了數(shù)據(jù)之后，我們來(lái)創(chuàng)建視圖函數(shù)，在創(chuàng)建具體視圖函數(shù)之前，我們先引入需要使用到的模塊：
from django.shortcuts import renderfrom django.http import JsonResponsefrom django.views.decorators.csrf import csrf_exemptfrom .models import Tempinfofrom dss.Serializer import serializerfrom django.views.generic import ListViewfrom dss.Mixin import MultipleJsonResponseMixinfrom PIL import Image,ImageDraw,ImageFontimport datetimeimport os為了簡(jiǎn)單快捷的序列化模型數(shù)據(jù)，在此我們使用一個(gè)第三方的 Django 序列化模塊——Django Simple Serializer，一個(gè)由國(guó)人開發(fā)的 Django 數(shù)據(jù)快速序列化方案。
首先是模板列表視圖，用于返回一個(gè)多條數(shù)據(jù)組成數(shù)組供小程序的首頁(yè)列表頁(yè)進(jìn)行渲染 WXML：
# 獲取模板列表class GetTempList(MultipleJsonResponseMixin,ListView): model = Tempinfo queryset = Tempinfo.objects.all() paginate_by = 6創(chuàng)建一個(gè)基于類的視圖，借助 Django Simple Serializer 生成一個(gè)分頁(yè)接口，每頁(yè)6條數(shù)據(jù)。
然后是模板詳情視圖，根據(jù)模板 id 查詢并返回模板的數(shù)據(jù)：
@csrf_exemptdef get_temp_detail(request): if request.method == 'POST': id = request.POST.get('tid','') if id is not '': try: detail = Tempinfo.objects.get(id=id) detail = serializer(detail,datetime_format='string') return JsonResponse({'sucess':True,'data':detail}) except Exception as e: return JsonResponse({'success':False,'data':str(e)}) else: return JsonResponse({'success':False,'data':'沒有數(shù)據(jù)'})最后是照片的生成視圖：
@csrf_exemptdef generate_photo(request): if request.method == 'POST': id = request.POST.get('tid','') content = request.POST.get('content','') if id != '' and content != '': try: temp = Tempinfo.objects.get(id=id) fontpath = os.path.join(BASE_DIR,'media/pyq_font/{font}.ttf'.format(font=temp.font)) ttfont = ImageFont.truetype(fontpath,int(temp.fontsize)) # 圖片大小 imgsize = temp.imgsize.split(",") try: bg = Image.new("RGB",(int(imgsize[0]),int(imgsize[1]))) except Exception as e: return JsonResponse({'success':False,'data':'圖片大小出錯(cuò)：'+str(e)}) im = Image.open(temp.img) draw2 = Image.blend(bg,im,1.0) draw = ImageDraw.Draw(draw2) try: textplace = temp.textplace.split(",") textcolor = temp.textcolor.split(",") draw.text((int(textplace[0]), int(textplace[1])),content, fill=(int(textcolor[0]), int(textcolor[1]), int(textcolor[2])),font=ttfont) except Exception as e: return JsonResponse({'success':False,'data':'文字顏色位置出錯(cuò)：'+str(e)}) if temp.text2 != '': text2place = temp.text2place.split(",") draw.text((int(text2place[0]), int(text2place[1])), datetime.date.strftime(datetime.date.today(),"%Y-%m-%d"), fill=(int(textcolor[0]), int(textcolor[1]), int(textcolor[2])), font=ttfont) filename = str(datetime.datetime.today()).replace(':','-').replace(' ','-').replace('.','') photoname = os.path.join(BASE_DIR,'media/pyq_photo/{0}.jpg'.format(filename)) draw2.save(photoname) return JsonResponse({'success':True,'data':'media/pyq_photo/{0}.jpg'.format(filename)}) except Exception as e: return JsonResponse({'success':False,'data':str(e)}) else: return JsonResponse({'success':False,'data':'不能為空'})我們的小程序目前只需要使用到這三個(gè)視圖函數(shù)。接下來(lái)創(chuàng)建 URL 路由。
在 views.py 同級(jí)目錄下新建一個(gè) pqy_tool 應(yīng)用的 urls.py 文件，將以下代碼寫入：
from django.conf.urls import url, includefrom . import viewsurlpatterns = [ url(r'^templist/',views.GetTempList.as_view()), url(r'^tempdetail/',views.get_temp_detail), url(r'^generate/',views.generate_photo),]然后，再在 settings.py 文件同級(jí)目錄下的 urls.py 中，將 pyq_tool 應(yīng)用的 urls.py 包含進(jìn)項(xiàng)目的 URl 路由中：
# 票圈神器 url(r'^pyq/',include('pyq_tool.urls')),完成這一步，我們的 Django API 接口就完成了。測(cè)試一下列表接口，結(jié)果顯示正常：
在完成后臺(tái) API 數(shù)據(jù)接口的創(chuàng)建之后，我們需要做的就是讓微信小程序請(qǐng)求這些接口并解析數(shù)據(jù)。這些步驟，都分別在 index.js、detai.js 和 result.js 中完成。
在 index.js 文件中，我們?cè)?data 字典中定義兩個(gè)空的變量：
data: { headimg: [ { url: '/imgs/head1.png' }, { url: '/imgs/head2.png' }, { url: '/imgs/head3.png' }, ], templist:[], next:'' },templist 用于填充模板列表數(shù)據(jù)，next 用于標(biāo)識(shí)分頁(yè)。
然后在 onload() 函數(shù)中，使用小程序的網(wǎng)絡(luò)請(qǐng)求接口 wx.request() 方法對(duì)模板列表的 API 進(jìn)行請(qǐng)求，將獲取到的數(shù)據(jù)賦值給 templist 和 next：
onLoad: function () { var that = this; //獲取模板列表 wx.request({ url: 'https://www.huabandata.com/pyq/templist/', method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/x-www-form-urlencoded' }, // 設(shè)置請(qǐng)求的 header success: function (res) { console.log(res) // success if (res.data) { that.setData({ templist: res.data.tempinfo_list, next: res.data.page_obj.next }) console.log(that.data) } else { wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) } }, fail: function (res) { // fail wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) }, complete: function (res) { // complete } }) },完成這一步，我們就可以在首頁(yè)看到通過(guò) wx.request 請(qǐng)求、經(jīng)由 WXML 的 wx:for 屬性渲染后的數(shù)據(jù)了：
這樣，列表頁(yè)面的功能基本實(shí)現(xiàn)了，我們還需要添加一個(gè)下拉刷新和上拉加載下一頁(yè)的功能。首先在 app.json 中的 window 字典中添加：
"enablePullDownRefresh": true以開啟下拉刷新的功能。然后在 index.js 的 onPullDownRefresh 函數(shù)中添加下拉刷新的代碼，與 onLoad() 函數(shù)的代碼類似：
onPullDownRefresh: function (i) { var that = this; wx.request({ url: 'https://www.huabandata.com/pyq/templist/', method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/x-www-form-urlencoded' }, // 設(shè)置請(qǐng)求的 header success: function (res) { console.log(res) // success if (res.data) { that.setData({ templist: res.data.tempinfo_list, next: res.data.page_obj.next }) console.log(that.data) } else { wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) } }, fail: function (res) { // fail wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) }, complete: function (res) { // complete } }) wx.showToast({ title: '刷新成功', icon: 'success', duration: 2000 }) console.log('刷新') },再是上拉加載下一頁(yè)的 onReachBottom() 函數(shù)，通過(guò) next 來(lái)判斷是否存在下一次，如果存在則傳入頁(yè)面參數(shù)并請(qǐng)求，如果不存在則提示“沒有更多了”：
onReachBottom: function (i) { var that = this; if (that.data.next != null) { wx.request({ url: 'https://www.huabandata.com/pyq/templist/', data: { 'page': that.data.next }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/x-www-form-urlencoded' }, // 設(shè)置請(qǐng)求的 header success: function (res) { console.log(res) // success if (res.data.is_paginated) { that.setData({ templist: that.data.templist.concat(res.data.tempinfo_list), next: res.data.page_obj.next }) console.log(that.data) } else { wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) } }, fail: function (res) { // fail wx.showToast({ title: '服務(wù)器開了小差，下拉刷新一下', icon: 'waring', duration: 3000 }) }, complete: function (res) { // complete } }) } else { wx.showToast({ title: '沒有更多了', icon: 'info', duration: 2000 }) } console.log('加載下一頁(yè)') },})完成這兩個(gè)函數(shù)的編寫，那么效果將如下所示：
詳情頁(yè)面在 detail.js 中主要有兩個(gè)函數(shù)進(jìn)行數(shù)據(jù)請(qǐng)求：
第一個(gè)請(qǐng)求我們直接可以在 onLoad() 函數(shù)中完成：
onLoad: function (options) { var that = this; var tid = options.tid //獲取模板詳情 wx.request({ url: 'https://www.huabandata.com/pyq/tempdetail/', data:{ 'tid':tid }, method:'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, success:function(res){ console.log(res) that.setData({ tempData:res.data.data }) },fail:function(res){ //fail },complete:function(res){ //complete } }) },對(duì)表單數(shù)據(jù)的提交，我們?cè)?detail.wxml 文件的 form 標(biāo)簽中綁定了 generate 函數(shù)，所以，我們?cè)?detail.js 文件的 Page() 中新建一個(gè) generate() 函數(shù)，將模板 id 和表達(dá)內(nèi)容傳遞給照片生成的 URL，如果請(qǐng)求成功獲取到了照片的 URL，那么使用小程序的重定向方法 wx.wx.redirectTo() 附帶上照片的 URL 跳轉(zhuǎn)到結(jié)果頁(yè)面，如果請(qǐng)求失敗則提示生成出錯(cuò)：
generate:function(e){ var that = this; console.log('提交的表單信息為', e) console.log('當(dāng)前數(shù)據(jù)為：', that.data) var tid = that.data.tempData.id; var content = e.detail.value.content; //顯示加載框 wx.showLoading({ title: '照片制作中', }) wx.request({ url: 'https://www.huabandata.com/pyq/generate/', method:'POST', data:{'tid':tid,'content':content}, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log(res) if(res.data.success){ wx.hideLoading() wx.redirectTo({ url: '../result/result?imgurl=' + res.data.data }) }else{ wx.hideLoading() wx.showToast({ title: '生成出錯(cuò)' }) } }, fail: function (res) { //fail wx.hideLoading() wx.showToast({ title: '生成出錯(cuò)' }) }, complete: function (res) { //complete } }) },詳情頁(yè)面最后呈現(xiàn)為：
結(jié)果頁(yè)面相對(duì)比較簡(jiǎn)單，獲取到頁(yè)面跳轉(zhuǎn)過(guò)來(lái)附帶的照片 URL 將其賦值給imgURL，就可以完成生成后的照片的顯示：
onLoad: function (options) { var that = this console.log(options) console.log('點(diǎn)擊某個(gè)模板跳轉(zhuǎn)到', options.imgurl) const imgurl = options.imgurl that.setData({ imgurl: imgurl }) },接著，定義保存照片的函數(shù) savePhoto()，在微信小程序中，保存一個(gè)圖片需要兩個(gè)步驟：
所以，我們的 savePhoto() 函數(shù)為：
savePhoto:function(i){ var that = this; // wx.authorize({ // scope: 'scope.writePhotosAlbum', // }) wx.getImageInfo({ src: 'https://www.huabandata.com/'+that.data.imgurl, success:function(i){ var path = i.path; wx.saveImageToPhotosAlbum({ filePath: path, success(result){ console.log(result) wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) } }) } }) },其效果如下所示：
到了這一步，我們的票圈神器小程序就開發(fā)完成了，接下來(lái)可以進(jìn)行上傳和上架了。
點(diǎn)擊微信開發(fā)者工具工具欄的“上傳”按鈕：
其會(huì)提示我們上傳成功后，需要將本次上傳的版本設(shè)置為體驗(yàn)版：
接著輸入此次上傳的版本信息：
提示上傳成功后，我們就可以在微信小程序管理后臺(tái)的“開發(fā)管理”欄目下看到了：
我們可以直接提交審核，或者是將其選為體驗(yàn)版本，供指定的體驗(yàn)者進(jìn)行前提體驗(yàn)測(cè)試。
我們直接提交審核，會(huì)要求我們填寫相關(guān)的信息：
接著點(diǎn)擊“提交審核”按鈕即可。完成提交后，我們就可以在“開發(fā)管理”的審核版本中看到我們剛剛提交的版本了：
耐心等待審核通過(guò)吧。
如果不通過(guò)怎么辦？嗯，改內(nèi)容唄，畢竟：
聯(lián)系客服
