內(nèi)容介紹
通過(guò)本篇blog，你可以熟悉從零開(kāi)始，搭建小程序開(kāi)發(fā)環(huán)境，并運(yùn)行起自己的第一個(gè)小程序。
小程序開(kāi)發(fā)步驟
1、 注冊(cè)賬號(hào)
2、 下載開(kāi)發(fā)工具搭建開(kāi)發(fā)環(huán)境
3、 創(chuàng)建工程，編寫(xiě)代碼
4、 手機(jī)上查看效果
通過(guò)以上四步就能創(chuàng)建屬于自己的小程序了。
注冊(cè)微信小程序賬號(hào)
注冊(cè)完成后是這樣的
下載開(kāi)發(fā)工具搭建開(kāi)發(fā)環(huán)境
小程序開(kāi)發(fā)工具下載地址
下載對(duì)應(yīng)的穩(wěn)定版本即可，如下圖
下載并安裝好工具后，打開(kāi)工具需要掃碼登入，登入后界面如下圖
創(chuàng)建工程編寫(xiě)代碼
點(diǎn)擊+ 創(chuàng)建新項(xiàng)目
這里的APPID需要去“開(kāi)發(fā)設(shè)置”界面查看
里面有很多模板可以選擇，我選擇了一個(gè)To do的模板
它會(huì)提示 沒(méi)有設(shè)置云開(kāi)發(fā)相關(guān)的設(shè)置的錯(cuò)誤提示，暫時(shí)不用管，程序一樣能跑，只能沒(méi)有后端，不能保存數(shù)據(jù)，不能與后端交互。 這里選擇真機(jī)調(diào)試，然后用自己的微信掃下二維碼，就能在手機(jī)上看到自己的第一個(gè)小程序了。
手機(jī)上查看效果
真機(jī)運(yùn)行結(jié)果如下：
錯(cuò)誤提示”當(dāng)前小程序沒(méi)有配置云開(kāi)發(fā)環(huán)境請(qǐng)?jiān)趀nvList.js 中配置你的云開(kāi)發(fā)環(huán)境“ 點(diǎn)擊確定即可。
前端界面還是可以操作的，可以填寫(xiě)代辦事項(xiàng)的相關(guān)屬性，只是不能上傳保存。
工程里的文件作用介紹
微信小程序的工程文件主要由以下幾個(gè)部分組成：
app.js：小程序的入口文件，用于注冊(cè)小程序?qū)嵗?，并監(jiān)聽(tīng)小程序的生命周期事件。
App({
async onLaunch() {
this.initcloud()
this.globalData = {
// 用于存儲(chǔ)待辦記錄的集合名稱(chēng)
collection: 'todo',
// 最大文件上傳數(shù)量
fileLimit: 2
}
},
flag: false,
/**
* 初始化云開(kāi)發(fā)環(huán)境（支持環(huán)境共享和正常兩種模式）
*/
async initcloud() {
const shareinfo = wx.getExtConfigSync() // 檢查 ext 配置文件
const normalinfo = require('./envList.js').envList || [] // 讀取 envlist 文件
if (shareinfo.envid != null) { // 如果 ext 配置文件存在，環(huán)境共享模式
this.c1 = new wx.cloud.Cloud({ // 聲明 cloud 實(shí)例
resourceAppid: shareinfo.appid,
resourceEnv: shareinfo.envid,
})
// 裝載云函數(shù)操作對(duì)象返回方法
this.cloud = async function () {
if (this.flag != true) { // 如果第一次使用返回方法，還沒(méi)初始化
await this.c1.init() // 初始化一下
this.flag = true // 設(shè)置為已經(jīng)初始化
}
return this.c1 // 返回 cloud 對(duì)象
}
} else { // 如果 ext 配置文件存在，正常云開(kāi)發(fā)模式
if (normalinfo.length != 0 && normalinfo[0].envId != null) { // 如果文件中 envlist 存在
wx.cloud.init({ // 初始化云開(kāi)發(fā)環(huán)境
traceUser: true,
env: normalinfo[0].envId
})
// 裝載云函數(shù)操作對(duì)象返回方法
this.cloud = () => {
return wx.cloud // 直接返回 wx.cloud
}
} else { // 如果文件中 envlist 不存在，提示要配置環(huán)境
this.cloud = () => {
wx.showModal({
content: '當(dāng)前小程序沒(méi)有配置云開(kāi)發(fā)環(huán)境，請(qǐng)?jiān)?envList.js 中配置你的云開(kāi)發(fā)環(huán)境',
showCancel: false
})
throw new Error('當(dāng)前小程序沒(méi)有配置云開(kāi)發(fā)環(huán)境，請(qǐng)?jiān)?envList.js 中配置你的云開(kāi)發(fā)環(huán)境')
}
}
}
},
// 獲取云數(shù)據(jù)庫(kù)實(shí)例
async database() {
return (await this.cloud()).database()
},
// 上傳文件操作封裝
async uploadFile(cloudPath, filePath) {
return (await this.cloud()).uploadFile({
cloudPath,
filePath
})
},
// 下載文件操作封裝
async downloadFile(fileID) {
return (await this.cloud()).downloadFile({
fileID
})
},
// 獲取用戶(hù)唯一標(biāo)識(shí)，兼容不同環(huán)境模式
async getOpenId() {
const {
result: {
openid,
fromopenid
}
} = await (await this.cloud()).callFunction({
name: 'getOpenId'
}).catch(e => {
let flag = e.toString()
flag = flag.indexOf('FunctionName') == -1 ? flag : '請(qǐng)?jiān)赾loudfunctions文件夾中g(shù)etOpenId上右鍵，創(chuàng)建部署云端安裝依賴(lài)，然后再次體驗(yàn)'
wx.hideLoading()
wx.showModal({
content: flag, // 此提示可以在正式時(shí)改為 "網(wǎng)絡(luò)服務(wù)異常，請(qǐng)確認(rèn)網(wǎng)絡(luò)重新嘗試！"
showCancel: false
})
throw new Error(flag)
})
if (openid !== "") return openid
return fromopenid
}
})
app.json：小程序的全局配置文件，用于配置頁(yè)面路徑、窗口樣式、網(wǎng)絡(luò)請(qǐng)求等全局設(shè)置。
{
"pages": [
"pages/list/index",
"pages/add/index",
"pages/file/index",
"pages/edit/index",
"pages/detail/index"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云開(kāi)發(fā)待辦",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
app.wxss：小程序的全局樣式文件，定義小程序中所有頁(yè)面的公共樣式。
/* 引入 weui 組件 */
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
page {
--footer-height: 10vh;
--button-size: 16vw;
--button-color: #353535;
--button-icon-size: 6vw;
}
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
min-height: 100vh;
overflow-x: hidden;
}
button {
background: initial;
}
button:focus {
outline: 0;
}
button::after {
border: none;
}
.form-group {
width: calc(100% - 40px);
margin: 10px 20px;
border-radius: 10px;
background: white;
}
.form-group_label {
align-self: flex-start;
margin-left: 20px;
color: #8D8D8D;
font-size: 15px;
}
.form-group_label:not(:first-child) {
margin-top: 20px;
}
.form-cell {
padding: 20px 15px;
}
.form-cell:not(:last-child) {
border-bottom: rgba(0, 0, 0, 0.05) solid 1px;
}
.form-cell.inline {
display: flex;
justify-content: flex-start;
align-items: center;
}
pages文件夾：該文
件夾包含了小程序的所有頁(yè)面，每個(gè)頁(yè)面通常由四個(gè)文件組成：
.js文件：頁(yè)面的邏輯文件，用于處理頁(yè)面的數(shù)據(jù)和交互邏輯。
.wxml文件：頁(yè)面的結(jié)構(gòu)文件，使用類(lèi)似HTML的標(biāo)記語(yǔ)言定義頁(yè)面的結(jié)構(gòu)。
.wxss文件：頁(yè)面的樣式文件，用于定義頁(yè)面的樣式。
.json文件：頁(yè)面的配置文件，用于配置當(dāng)前頁(yè)面的一些特殊設(shè)置，如導(dǎo)航欄標(biāo)題、下拉刷新等。
utils文件夾：該文件夾用于存放小程序的工具類(lèi)文件，如封裝的網(wǎng)絡(luò)請(qǐng)求、工具函數(shù)等。
project.config.json：項(xiàng)目配置文件，用于配置小程序的項(xiàng)目信息、編譯配置等。
其他資源文件：小程序開(kāi)發(fā)中可能會(huì)使用到的其他資源文件，如圖片、字體等。
這些文件組成了微信小程序的工程結(jié)構(gòu)，開(kāi)發(fā)者可以根據(jù)需要進(jìn)行修改和擴(kuò)展。在開(kāi)發(fā)過(guò)程中，主要關(guān)注的是頁(yè)面文件（包括邏輯、結(jié)構(gòu)、樣式和配置）以及全局配置文件，通過(guò)編寫(xiě)和修改這些文件來(lái)實(shí)現(xiàn)小程序的功能和界面展示。
總結(jié)
微信小程序的開(kāi)發(fā)相對(duì)來(lái)說(shuō)是比較方便的。微信小程序使用的是前端開(kāi)發(fā)技術(shù)，主要是基于HTML、CSS和JavaScript，如果你熟悉這些技術(shù)，上手開(kāi)發(fā)小程序會(huì)比較容易。
以下是一些微信小程序開(kāi)發(fā)的便利之處：
-
開(kāi)發(fā)工具：微信提供了一套完整的開(kāi)發(fā)工具，包括開(kāi)發(fā)者工具和調(diào)試工具，可以方便地進(jìn)行代碼編寫(xiě)、調(diào)試和預(yù)覽。
-
文檔和教程：微信官方提供了詳細(xì)的開(kāi)發(fā)文檔和教程，包括開(kāi)發(fā)指南、API文檔和示例代碼，可以幫助開(kāi)發(fā)者快速入門(mén)并解決問(wèn)題。
-
前端技術(shù)：微信小程序使用的是前端開(kāi)發(fā)技術(shù)，相對(duì)于其他平臺(tái)可能更為熟悉和廣泛使用。許多前端開(kāi)發(fā)人員已經(jīng)具備了相關(guān)的技能和經(jīng)驗(yàn)，可以快速上手進(jìn)行開(kāi)發(fā)。
-
市場(chǎng)和用戶(hù)：微信擁有龐大的用戶(hù)基礎(chǔ)，小程序可以直接在微信內(nèi)使用，無(wú)需用戶(hù)下載和安裝，方便用戶(hù)訪(fǎng)問(wèn)和使用。
-
開(kāi)放能力：微信小程序提供了豐富的開(kāi)放能力，包括訪(fǎng)問(wèn)微信用戶(hù)的個(gè)人信息、支付、地理位置、攝像頭等，可以實(shí)現(xiàn)更多的功能和交互體驗(yàn)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-625343.html
當(dāng)然，具體開(kāi)發(fā)的難易程度還是會(huì)受到個(gè)人的技術(shù)水平和項(xiàng)目的復(fù)雜性等因素的影響。但總體來(lái)說(shuō)，微信小程序的開(kāi)發(fā)是相對(duì)方便和高效的，適合初學(xué)者和有一定前端開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)者。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-625343.html
到了這里，關(guān)于從零基礎(chǔ)開(kāi)始開(kāi)發(fā)自己的第一個(gè)微信小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
