小程序組件怎麼用

① 微信小程序如何使用npm，使用vant組件

新建一個微信小程序，在小程序目錄下 輸入命令：npm init（記得以管理員身份運行開發工具）,然後一直回車，直至在小程序目錄下，生成package.json文件

通過 npm 安裝
npm i @vant/weapp -S --proction
通過 yarn 安裝
yarn add @vant/weapp --proction

之後的具體步驟參考 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 文檔

② 小程序引入weui使用步驟

第一步：
在app.json中，設置
"useExtendedLib":{
"weui": true
}
第二步：
在對應需要使用組件的頁面json文件中，引入，例如引入彈框組件
{
"usingComponents": {
"mp-dialog": "weui-miniprogram/dialog/dialog"
}
}
第三步：在對應wxmll文件中，引入結構
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認'}]}}">
<view>test content</view>
</mp-dialog>

③ 蘋果手機小程序怎麼用

以iPhone 7為例，使用小程序的方法如下：

1、在手機桌面找到微信圖標，點擊打開此應用。

④ 微信小程序自定義picker組件

封裝hf-picker選擇器。因為自帶的picker在iOS 、安卓上顯示的樣式不一致，產品測試提出個能不能樣式弄成一致。想系統提供了picker-view這個，應該是沒問題的。 

一番操作以後，發現在層級不復雜的頁面效果很不錯，但是在一些view嵌套view嵌套的很深，比如裡面已經有非statics的父view時，那麼這個選擇器的彈窗顯示的位置就不對了。同事說這個通過view肯定是實現不了，畢竟父view范圍就那麼大，除非把選擇器view放到page裡面去 ,是可以實現，但是違背了封裝組件的原則。同事說試試half-screen-dialog，結果發現提供的Slot效果達不到UI要求.

如今有方法對half-screen-dialog的內部元素樣式進行設置了，趕緊搞起。 最終結果還是挺好的。因為是dialgo彈出，所以不用考慮父view的范圍問題了。 

⑤ 微信小程序多個視頻組件同時播放

首先說一下我的應用場景, 在小程序中會有多個頁面存在視頻組件的情況, 為了防止視頻播放時多個視頻組件同時播放的情況,現記錄一下方案:

一. 可以在需要視頻播放的地方弄一個視頻播放的按鈕, 當視頻播放的時候再初始化視頻組件, 保證整個應用內只有一個視頻組件(視頻組件的位置需要計算), 整個方法只是理論下的情況;

二. 在app.js中 設置兩個對象, currentVideoId(播放視頻組件的id)和videoContext(當前播放視頻的對象, 通過wx.createVideoContext方法獲得), 在頁面的js中控制, 保證video組件綁定play方法:

 <video src="url" bindplay="play"></video>

在play方法中實現即可:

var id = e.currentTarget.id;

      if (id != null) {

        if (app.currentVideoId != id) {

          if (app.videoContext != null) {

            app.videoContext.stop();

            console.warn("暫停");

          }

          app.currentVideoId = id;

          app.videoContext = wx.createVideoContext(id);

        }

      }

因為currentVideoId 和videoContext是唯一的對象, 方法中播放監聽事件會暫停之前的播放, 然後再賦值, 等下次video播放監聽進來的時候, 會進行判斷

三. 包含富文本組件的視頻組件同時播放的情況

依據上面的例子, 當自定義富文本組件中包含多個video組件時也用上面的方法會產生錯誤, 雖然log會顯示將執行視頻暫停或者停止播放, 但是沒有效果, 查看 視頻api , 提示

根據api顯示, id為video組件的id, 還有一個"Object this", 但是依據上面的api使用, 直接用id確實可以獲取video對象, 但是api解釋中提示, "在自定義組件下，當前組件實例的this，以操作組件內 video組件", 在自定義組件中, 要加this, 所以總結: 在上面api使用中, 如果video在pages頁面中, wx.createVideoContext參數只寫id沒有問題, 但是當video在自定義組件中, 要必須加this, 才能正確返回VideoContext對象;

⑥ 微信小程序 怎麼 選擇組件 做操作

微信小程序怎麼選擇組件，怎麼操作，我們可以通過以下方式：
一、常規代碼式
一般有技術實力的公司開發小程序是依照微信官方的代碼形式開發，這種方法優點就是，製作出的小程序界面、樣式排列各不相同，功能也比較豐富。但是一般中小型傳統企業並不具備這種開發實力。
原因：a、因為沒有實力的專業開發人員;
b、沒有太充足的開發資金提供;
c、對微信小程序未來發展和互聯網的發展認知不夠。
二、專業的第三方微信小程序開發公司
這類企業都有專門的技術團隊和豐富的開發經驗，商家只要把需求提供給公司，然後跟技術進行交流一下，把你的想法和需求說明，就可以開始了，而且這種開發方式開發價格較低，一般根據功能也就幾千，貴的話也就是一兩萬既可以實現。

⑦ 小程序的 iview Weapp 組件庫的使用

iview 這個 UI 框架想必大家都很熟了，這個搞 Vue 框架的基本素養。下面來看看小程序版的。

商城小程序必備的數字輸入框。

在 .json 中引入組件

在 .wxml 中引入

下面是運行的效果，總的來看還是不錯的。

還有個常用的動作面板。
從底部彈出的模態框，提供和當前場景相關的 2 個以上的操作動作，也支持提供標題和描述。內置固定的展示樣式、不支持特別靈活的修改。

在 .json 中引入組件

在 .wxml 中引入組件

這個動作面板和微信小程序原生的動作面板有啥視覺的區別，一起來看看：

總的來講 iview 還比較好看的。
更多用法去參考： https://weapp.iviewui.com/

另外有贊出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具

⑧ 小程序怎麼組件開發

要有ES6 基礎.
css js 基礎.
根據小程序官方的組件文檔.
把每一個可以復用的功能設計成通用的. 然後創建成組件 調用使用.
細節太多. 可以追問

⑨ 小程序自定義組件

新手在第一次自定義組件的時候，首先寫出來需要定義的組件的內容和布局，防止不熟練而出錯。

一、新建一個文件夾，自己命名。以後所有的自定義組件都存放於此。

二、在此文件夾下新建一個自行命名的文件夾，命名最好語義化，與裡面自定義組件的名字相呼應。

三、在新建的文件夾內新建一個Component文件 命名也是自定義。

四、在xxx裡面把事先寫好的ml和ss以及js文件復制進去。

1、把提前寫好的頁面布局復制到這個此文件裡面。寫法和在普通頁面的寫法一樣  {{}}是插值表達式。這里可以直接使用js裡面定義的數據。

eg:

1、組件自定義的屬性列表寫在 properties裡面。需要寫成對象的形式 

eg:

2、組件的方法列表寫在 methods裡面

eg:

五、在需要引用自定義組件頁面文件的xxx.json裡面引用。

注意：引用的時候，不可以以./開頭。前面命名可以自命名，不必和後面名字一樣。

六、在需要引用的頁面里的的xxx.wxml里寫已經命名好的組件。

組件的名字為自定義命名。

eg:

因為組件是自己寫的，並非微信提供的官方組件，所以如果想要獲取觸發事件的話 ，需要寫一個同步組件回傳數據

觸發自定義事件用triggerEvent。在需要調用的方法內寫this.triggerEvent(「自定義屬性名」，『需要更新的數據』)

eg:

然後將此事件綁定到頁面中。綁定事件需要用bind:自定義的方法名=「js中定義的方法」

利用data-active="變數名"屬性添加需要變化的變數

eg:

xxx.wxml內寫法：

注意：想要在頁面中使用自定義的組件屬性時，必須要現在定義組件的文件夾內的js文件中，先去定義屬性，然後才可以引入使用。

⑩ 怎麼在微信里添加「小程序」功能教程

在微信里添加「小程序」功能步驟如下：

1、打開微信，點擊主頁上方搜索方框，如下圖所示