正文

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

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

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

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

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

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

本文目錄:

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

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

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

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

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

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

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

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

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

02. 小程序書店

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

這個(gè)小程序非常簡單，可以作為初學(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ǔ)備，想開發(fā)一個(gè)屬于自己的小程序，這個(gè) Demo 再適合你不過了，這個(gè)高仿喜馬拉雅是一個(gè)初級(jí)項(xiàng)目完全使用微信小程序原生開發(fā)，沒有使用自定義組件，非常的適合微信小程序開發(fā)新手。

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

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

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

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

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

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

07. 情書站點(diǎn)

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

下載。

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

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

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

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

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

項(xiàng)目地址：

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

uniapp插件市場：

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)問editor組件控制拉起鍵盤操作支持嗎？

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

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

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

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

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

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

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

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

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

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