一、認(rèn)識(shí)微信小程序（1）先了解應(yīng)用如何開發(fā)

Web App（內(nèi)嵌內(nèi)瀏覽器打開指定網(wǎng)頁(yè)）Native App（原生開發(fā)，也就是使用iO" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 怎么能免費(fèi)制作自己的微信小程序？

怎么能免費(fèi)制作自己的微信小程序？

時(shí)間：2022-07-29 12:57:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-07-29 12:57:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)



這篇帶你分分鐘入門小程序開發(fā)。從認(rèn)識(shí)小程序開始到搭建開發(fā)環(huán)境以及代碼編寫，文章過(guò)長(zhǎng)，建議保存慢慢看。

一、認(rèn)識(shí)微信小程序

（1）先了解應(yīng)用如何開發(fā)

Web App（內(nèi)嵌內(nèi)瀏覽器打開指定網(wǎng)頁(yè)）
Native App（原生開發(fā)，也就是使用iOS和Android代碼開發(fā)）
Hybrid App（混合APP開發(fā)，寫DIV+CSS+JS+PHP代碼開發(fā)）
（2）微信、公眾號(hào)、小程序

（3）小程序和公眾號(hào)的區(qū)別

（4）小程序與APP的區(qū)別

二、知識(shí)儲(chǔ)備

【重要】HTML、CSS、JavaScript、PHP（基礎(chǔ)）、MySQL（基礎(chǔ)）

【次要】接觸過(guò)Angular / Vue / React之類的前段框架

【次要】了解Node、ECMAScript 2015（ES6）更好

三、搭建開發(fā)環(huán)境

（1）安裝開發(fā)工具

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

（2）安裝：傻瓜式安裝>>一直下一步

（3）創(chuàng)建項(xiàng)目

步驟1：雙擊開發(fā)者工具，用微信掃碼登錄即可

（4）創(chuàng)建：

（5）工具使用介紹

四、目錄介紹

概念1：小程序項(xiàng)目由n個(gè)頁(yè)面組成

概念2：每個(gè)頁(yè)面一般由4個(gè)核心文件，分別為邏輯代碼（js）、頁(yè)面結(jié)構(gòu)（wxml）、頁(yè)面樣式（wxss）、頁(yè)面配置（json）

五、代碼編寫

1.核心開發(fā)思想

步驟1：顯示靜態(tài)頁(yè)面（DIV + CSS）

步驟2：數(shù)據(jù)動(dòng)態(tài)化（js發(fā)送異步請(qǐng)求獲取數(shù)據(jù)，接著遍歷顯示數(shù)據(jù)）

2.創(chuàng)建頁(yè)面

3.實(shí)現(xiàn)步驟：

a.定義路由（名詞，指設(shè)置一個(gè)網(wǎng)址來(lái)訪問(wèn)文件）b.創(chuàng)建頁(yè)面（js、wxss、wxml、json）c.修改wxml寫結(jié)構(gòu)（html）d.修改wxss寫樣式（css）-------------------------4.數(shù)據(jù)綁定

5.實(shí)現(xiàn)步驟

a.修改js文件代碼b.修改wxml文件綁定數(shù)據(jù)---------------shphp.wxml

<!--pages/shphp/shphp.wxml--><view>【{{title}}】</view><view>當(dāng)前頁(yè)面：pages/shphp/shphp</view><view> 即可報(bào)名畢業(yè) <text>薪資不達(dá)8K不收學(xué)費(fèi)</text></view>shphp.js

// pages/shphp/shphp.jsPage({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { title: "上海PHP學(xué)院" }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 * 相當(dāng)于window.onload */ onLoad: function (options) { }})6.數(shù)據(jù)遍歷和判斷：

效果圖

Page({ //初始化頁(yè)面數(shù)據(jù)（data對(duì)象中的所有屬性能被頁(yè)面訪問(wèn)到） data: { title: '上海PHP學(xué)院', uname: '小澤', phpData: [ { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' }, { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' }, { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' } ] }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 * 相當(dāng)于window.onload */ onLoad: function (options) { }})7.實(shí)現(xiàn)步驟

shphp.js

Page({ //初始化頁(yè)面數(shù)據(jù)（data對(duì)象中的所有屬性能被頁(yè)面訪問(wèn)到） data: { title: '上海PHP學(xué)院', uname: '波妞', phpData: [ { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' }, { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' }, { title: '2018年P(guān)HP課程重磅升級(jí)', title2: '不8000就業(yè)不收學(xué)費(fèi)' } ] }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 * 相當(dāng)于window.onload */ onLoad: function (options) { }})shphp.wxml

<!--pages/shphp/shphp.wxml--><view>【{{title}}】</view><view>當(dāng)前頁(yè)面：pages/shphp/shphp</view><view> 即可報(bào)名畢業(yè) <text>薪資不達(dá)8K不收學(xué)費(fèi)</text></view><view wx:if="{{uname == '波妞'}}"> 愛妃，寡人馬上就到 </view><view wx:elif="{{uname == '小澤'}}"> 趕快洗白白 </view><view wx:elif="{{uname == '倉(cāng)倉(cāng)'}}"> 倉(cāng)倉(cāng) </view><view wx:else> 愛卿退下 </view><view wx:for="{{phpData}}"> {{index}}: {{item.title}}</view>

六、文件配置

pages 聲明小程序項(xiàng)目由哪些頁(yè)面組成（注：默認(rèn)加載第一個(gè)）

"pages":[ "pages/joke/joke", //笑話 "pages/picture/picture", //趣圖 "pages/shphp/shphp", //上海PHP學(xué)院 "pages/index/index", //小程序Demo頁(yè) "pages/logs/logs" //小程序Demo頁(yè) ],window 配置頁(yè)面窗口

"window":{ "navigationBarBackgroundColor": "#268dcd", //導(dǎo)航欄背景 "navigationBarTitleText": "無(wú)聊笑話", //導(dǎo)航欄標(biāo)題 "navigationBarTextStyle": "white", //導(dǎo)航欄標(biāo)題顏色 "enablePullDownRefresh": true, //是否允許下拉刷新 "backgroundTextStyle": "light" //下拉框樣式},tabBar 小程序底部導(dǎo)航

"tabBar": { "color": "#000000", //底部菜單文字顏色 "selectedColor": "#268dcd", //底部菜單文字選中顏色 "backgroundColor": "#ffffff", //底部菜單背景顏色 "borderStyle": "white", //底部菜單邊框顏色 "list": [ //菜單個(gè)數(shù)(至少兩個(gè)生效) { "text": "笑話", "pagePath": "pages/joke/joke", "iconPath": "image/ic_joke_gray.png", //默認(rèn)圖標(biāo) "selectedIconPath": "image/ic_joke_blue.png" //選中圖片}....}

七、案例：笑話小程序

(1)效果圖

（2）頁(yè)面布局

將靜態(tài)資源放到項(xiàng)目中

笑話頁(yè)面

實(shí)現(xiàn)：

app.wxss

/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;} .joke { margin: 10px; padding: 10px; border-radius: 5px; border-top: 1px solid #DEDEDE; border-left: 1px solid #DEDEDE; box-shadow: 2px 2px 2px #C7C7C7;}joke.wxml

<!--pages/joke/joke.wxml--><view class="joke"> <view>笑話1</view> <view>2018-8-8</view></view><view class="joke"> <view>笑話1</view> <view>2018-8-8</view></view> 趣圖頁(yè)

實(shí)現(xiàn)方法：

底部菜單：

實(shí)現(xiàn)：

{ "pages": [ "pages/picture/picture", "pages/joke/joke", "pages/shphp/shphp", "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#268dcd", "navigationBarTitleText": "無(wú)聊笑話", "navigationBarTextStyle": "white", "enablePullDownRefresh": true, "backgroundTextStyle": "light" }, "tabBar": { "color": "#000000", "selectedColor": "#268dcd", "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ { "text": "笑話", "pagePath": "pages/joke/joke", "iconPath": "image/ic_joke_gray.png", "selectedIconPath": "image/ic_joke_blue.png" }, { "text": "趣圖", "pagePath": "pages/picture/picture", "iconPath": "image/ic_gif_gray.png", "selectedIconPath": "image/ic_gif_blue.png" } ] }}

（3）數(shù)據(jù)綁定-請(qǐng)求笑話接口

接口：https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=2

https://v.juhe.cn/joke/img/list.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=2&sort=asc&time=1418745237

a. 修改js

b. 修改頁(yè)面

joke.js

// pages/picture/picture.jsPage({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { jokeList: [ { content: '笑話1', updatetime: '2018-8-8' }, { content: '笑話1', updatetime: '2018-8-8' }, { content: '笑話1', updatetime: '2018-8-8' } ] }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */ onLoad: function (options) { var thatObj = this; wx.request({ url: 'https://v.juhe.cn/joke/content/text.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10', success: function (res) { console.log(res.data.result.data) thatObj.setData({ jokeList: res.data.result.data }); } }) },})joke.wxml

<!--pages/joke/joke.wxml--><view class="joke" wx:for="{{jokeList}}"> <view> {{item.content}}</view> <view>{{item.updatetime}}</view></view>趣味圖頁(yè)面

a.修改js

b.修改頁(yè)面

picture.js

// pages/picture/picture.jsPage({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { jokeList: [ { content: '笑話1', updatetime: '2018-8-8', url: '' }, { content: '笑話1', updatetime: '2018-8-8', url: '' }, { content: '笑話1', updatetime: '2018-8-8', url: '' } ] }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */ onLoad: function (options) { var thatObj = this; wx.request({ url: 'https://v.juhe.cn/joke/img/list.php?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10&sort=asc&time=1418745237 ', //僅為示例，并非真實(shí)的接口地址 success: function (res) { //console.log(res.data.result.data) thatObj.setData({ jokeList: res.data.result.data }); } }) },})picture.wxml

<!--pages/picture/picture.wxml--><view class="joke" wx:for="{{jokeList}}"> <view> {{item.conotent}}</view> <view> <image src="{{item.url}}"></image> </view> <view>{{item.updatetime}}</view></view>

關(guān)鍵詞：程序,免費(fèi)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉