正文

微信小程序原生開(kāi)發(fā)

發(fā)布時(shí)間：2023-03-22 12:27:44 稿源：創(chuàng)意嶺閱讀： 1390 問(wèn)大家

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于微信小程序原生開(kāi)發(fā)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com

本文目錄:

1、微信小程序(Mini Program)技術(shù)棧與框架簡(jiǎn)介
2、盤(pán)點(diǎn) 7 個(gè)超棒的微信小程序項(xiàng)目
3、微信小程序開(kāi)發(fā)的原則，規(guī)范和限制有哪些
4、uniapp開(kāi)發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

微信小程序原生開(kāi)發(fā)

一、微信小程序(Mini Program)技術(shù)棧與框架簡(jiǎn)介

關(guān)鍵字：微信小程序、Mini Program、技術(shù)棧、框架、WePy、MPVue

整體小程序開(kāi)發(fā)類(lèi)似Web App開(kāi)發(fā)，尤其是使用了Vue或React框架的Web App開(kāi)發(fā)。

小程序原生技術(shù)棧與框架WePY、MPVue之間的比較，參考博客

二、盤(pán)點(diǎn) 7 個(gè)超棒的微信小程序項(xiàng)目

小程序上線(xiàn)后，改版了很多次，包括一些 Api 接口也有改動(dòng)。如果你學(xué)習(xí)一個(gè)很久之前的小程序項(xiàng)目是沒(méi)有意義的，本文推薦的小程序都是最近有更新的。相信在你學(xué)習(xí)、部署的過(guò)程中，不會(huì)遇到很多問(wèn)題。

本文推薦的項(xiàng)目從入門(mén)到進(jìn)階都有，收藏起來(lái)吧。

02. 小程序書(shū)店

技術(shù)棧：Taro + Taro UI + Redux + Webpack + ES6 + Mock。這個(gè)項(xiàng)目可以作為你第一個(gè)小程序練手項(xiàng)目。

這個(gè)小程序非常簡(jiǎn)單，可以作為初學(xué)者第一個(gè)實(shí)戰(zhàn)項(xiàng)目。幫助新手理解 Taro 與 Redux 的配合方式與 Taro 的基本使用。本項(xiàng)目還提供了一個(gè)快速搭建本地 mock 服務(wù)的解決方案。

除此之外，這個(gè)項(xiàng)目還提供了學(xué)習(xí)文檔：

03. 高仿喜馬拉雅

如果你僅僅有 HTML CSS Js 的知識(shí)儲(chǔ)備，想開(kāi)發(fā)一個(gè)屬于自己的小程序，這個(gè) Demo 再適合你不過(guò)了，這個(gè)高仿喜馬拉雅是一個(gè)初級(jí)項(xiàng)目完全使用微信小程序原生開(kāi)發(fā)，沒(méi)有使用自定義組件，非常的適合微信小程序開(kāi)發(fā)新手。

04. 網(wǎng)易云音樂(lè)小程序

基于Taro與網(wǎng)易云音樂(lè) api 開(kāi)發(fā)，技術(shù)棧主要是：typescript+taro+taro-ui+redux+react-hooks。

目前主要是著重小程序端的展示，主要也是借此項(xiàng)目強(qiáng)化下上述幾個(gè)技術(shù)棧的使用，打造一個(gè)最佳實(shí)踐項(xiàng)目，通過(guò)這個(gè)項(xiàng)目也可以幫助你快速使用 Taro 開(kāi)發(fā)一個(gè)屬于你自己的小程序。

這是該小程序?qū)崿F(xiàn)的一些功能：

小程序 GitHub Trending Hub 是一個(gè)以 Feed 流形式查看 GitHub Trending 倉(cāng)庫(kù)集合的工具，通過(guò)它可以及時(shí)查看最近更新的熱門(mén)倉(cāng)庫(kù)。

剛剛提及的項(xiàng)目適合新手入門(mén)，這個(gè)小程序適合進(jìn)階選手。這個(gè)程序涉及很多組件的使用比如：

07. 情書(shū)站點(diǎn)

第一個(gè)項(xiàng)目是校園小情書(shū)的微信小程序，該項(xiàng)目功能包括表白墻、樹(shù)洞、校園論壇。

下載。

三、微信小程序開(kāi)發(fā)的原則，規(guī)范和限制有哪些

小程序開(kāi)發(fā)應(yīng)該遵循從簡(jiǎn)原則，盡可能?chē)?yán)格意義上的按照客戶(hù)的要求以及想法來(lái)進(jìn)行相關(guān)功能的開(kāi)發(fā)，除非是客戶(hù)在開(kāi)發(fā)的過(guò)程中有特別強(qiáng)調(diào)的，不然自作主張很容易跑題的，這樣造成了后期功能的沒(méi)辦法閉環(huán)使用。小程序開(kāi)發(fā)應(yīng)該嚴(yán)格把控開(kāi)發(fā)進(jìn)程，嚴(yán)格按照合同期限進(jìn)行相關(guān)功能的開(kāi)發(fā)和推薦，除非有一些特殊情況下的影響下，可以跟客戶(hù)商量小程序開(kāi)發(fā)的延期以及具體時(shí)間?！军c(diǎn)擊查看小程序開(kāi)發(fā)底價(jià)】

想要了解更多有關(guān)小程序開(kāi)發(fā)的相關(guān)信息，推薦咨詢(xún)豬八戒網(wǎng)。豬八戒網(wǎng)成立于2006年，是中國(guó)領(lǐng)先的企業(yè)服務(wù)平臺(tái)，服務(wù)交易獨(dú)角獸企業(yè)。豬八戒網(wǎng)現(xiàn)有注冊(cè)用戶(hù)2800萬(wàn)、在全國(guó)布局線(xiàn)下數(shù)字化創(chuàng)業(yè)園區(qū)超過(guò)100個(gè)。十余年來(lái)，累計(jì)有10萬(wàn)余個(gè)人通過(guò)平臺(tái)孵化成長(zhǎng)為公司，超過(guò)100萬(wàn)人通過(guò)平臺(tái)實(shí)現(xiàn)靈活就業(yè)，千萬(wàn)企業(yè)通過(guò)平臺(tái)解決專(zhuān)業(yè)服務(wù)需求；專(zhuān)業(yè)性值得選擇。

四、uniapp開(kāi)發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

照著騰訊文檔小程序開(kāi)發(fā)了微信小程序富文本編輯器組件，這幾天做個(gè)整理，如有這個(gè)需求可以前往騰訊文檔小程序操作看看實(shí)際效果。畢竟參照的是微信自家小程序，無(wú)法做到百分百效果，只能按現(xiàn)有開(kāi)放api盡可能實(shí)現(xiàn)。

項(xiàng)目地址：

https://github.com/chellel/wechat-editor-project

uniapp插件市場(chǎng)：

https://ext.dcloud.net.cn/plugin?id=6365

editor富文本編輯器組件官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否則會(huì)受到小程序css影響。小程序本身editor標(biāo)簽有css樣式：

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目標(biāo)文字時(shí)，將值設(shè)為n'，可以實(shí)現(xiàn)換行

this.editorCtx.insertText({ text: 'n' });

參考：請(qǐng)問(wèn)editor組件控制拉起鍵盤(pán)操作支持嗎？

https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技術(shù)專(zhuān)員-sanford 2019-09-20

不支持的。iOS無(wú)法通過(guò)接口拉起鍵盤(pán)，必須用戶(hù)點(diǎn)擊；安卓則可以。所以，終究是不一致，不行。。

該組件主要為微信editor組件的api調(diào)用集成封裝，因此受到的限制同文檔描述一致，即編輯器內(nèi)支持部分 HTML 標(biāo)簽和內(nèi)聯(lián)樣式，不支持class和id，支持的標(biāo)簽詳見(jiàn)： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不滿(mǎn)足的標(biāo)簽會(huì)被忽略，<div>會(huì)被轉(zhuǎn)行為<p>儲(chǔ)存。

這也是為什么在做富文本解析時(shí)，僅僅用rich-text組件無(wú)法有效還原h(huán)tml內(nèi)容，在解析內(nèi)容的時(shí)候就需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。因此最好方式是引入市場(chǎng)封裝好的富文本解析插件去解析html。

所以，開(kāi)發(fā)者需要自行權(quán)衡在做富文本編輯開(kāi)發(fā)時(shí)，是否使用微信自帶的editor組件，或者參考騰訊文檔小程序采用webview內(nèi)嵌網(wǎng)頁(yè)等方式去渲染。

小程序富文本編輯器editor初體驗(yàn)：( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生開(kāi)發(fā)，將demo組件中的相關(guān)dom元素標(biāo)簽和api換成微信原生即可。

以上就是關(guān)于微信小程序原生開(kāi)發(fā)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。