如何封裝小程序組件

❶ 微信小程序uniapp封裝多列選擇器組件

最近微信小程序要做一個地區選擇器，但是uniapp多列選擇器組件不是很好用，同事自己封裝了一個，我就拿來記錄一下

先在外部的components文件下新建一個mulpicker.vue文件

頁面中就直接調用

❷ 如何快速開發個微信小程序

無論是前端開發，還是後端開發，時間長了，你總會能總結出它的一些規律的，對於前端開發主要就兩條，頁面展現，邏輯處理。如果是全流程開發的話，那就是，如何創建項目，頁面如何實現，數據獲取和邏輯處理如何實現，如何打包上線。移動端或者前端，基本開發流程就這個四個步驟。所以在在前端方面去學習新一門開發技術，只要你解決了這四個問題，那一切就OK了，下面我就講一下，我在學習微信小程序開發，如何用這四步法快速上手開發的

學習一門新技術先看下它的開發文檔 小程序介紹

然後呢就是開始一些准備的步驟，微信公眾平台提供我們開發管理的功能 微信工作平台

賬號注冊

小程序信息配置

請看 小程序開發步驟

小程序項目的創建

到此第一個問題我們就算完成了，接下來解決小程序界面如何搭建。

然後最重要的，微信提供自己的開發者工具，不需要用chrome什麼調試， 微信開發者工具 提供wxapi的調用測試能力，這些在chrome裡面是測試不了的

框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

WXML(WeiXin Markup language) 用於描述頁面的結構。

WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。

小程序的頁面是由wxml 和wxss這兩個文件來實現的，wxml結構如何寫請參考 微信小程序組件

wxss是負責樣式控制的，基本類似於css,支持flex布局，所以要想上手構建微信小程序的界面，最好要熟悉html ,css.

還有最重要的就是生命周期了

//index.js

Page({

  data: {

    text: "This is page data."

  },

  onLoad: function(options) {

    // 頁面創建時執行

  },

  onShow: function() {

    // 頁面出現在前台時執行

  },

  onReady: function() {

    // 頁面首次渲染完畢時執行

  },

  onHide: function() {

    // 頁面從前台變為後台時執行

  },

  onUnload: function() {

    // 頁面銷毀時執行

  },

  onPullDownRefresh: function() {

    // 觸發下拉刷新時執行

  },

  onReachBottom: function() {

    // 頁面觸底時執行

  },

  onShareAppMessage: function () {

    // 頁面被用戶分享時執行

  },

  onPageScroll: function() {

    // 頁面滾動時執行

  },

  onResize: function() {

    // 頁面尺寸變化時執行

  },

  onTabItemTap(item) {

    // tab 點擊時執行

    console.log(item.index)

    console.log(item.pagePath)

    console.log(item.text)

  },

  // 事件響應函數

  viewTap: function() {

    this.setData({

      text: 'Set some data for updating view.'

    }, function() {

      // this is setData callback

    })

  },

  // 自由數據

  customData: {

    hi: 'MINA'

  }

})

微信提供的界面組件很多，沒必要一下子全學會，會用一兩個就行，其他的遇到需要的時候現查先做，這樣又節約學習時間，又能夠加深理解。到此第二個問題我們解決了，下面看第三個問題，數據邏輯如何處理。

數據定義

數據展現

邏輯處理是通過js文件來操作的

一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS 腳本文件來處理用戶的操作。

<view>{{ msg }}</view>

<button bindtap="clickMe">點擊我</button>

點擊 button 按鈕的時候，我們希望把界面上 msg 顯示成 "Hello World"，於是我們在 button 上聲明一個屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應這次點擊操作：

Page({

  clickMe: function() {

    this.setData({ msg: "Hello World" })

  }

})

響應用戶的操作就是這么簡單，更詳細的事件可以參考文檔  WXML - 事件  。

此外你還可以在 JS 中調用小程序提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，例如獲取用戶信息、本地存儲、微信支付等。在前邊的 QuickStart 例子中，在 pages/index/index.js 就調用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱，最後通過 setData 把獲取到的信息顯示到界面上。更多 API 可以參考文檔  小程序的API  。

現在幾乎每個應用都需要從後端獲取數據，那麼小程序如何獲取呢，當然是通過網路操作了。我們封裝了小程序的網路操作

const app = getApp()

const request = (url, options) => {

  return new Promise((resolve, reject) => {

    wx.request({

      url: `${app.globalData.host}${url}`,

      method: options.method,

      data: options.method === 'GET' ? options.data : JSON.stringify(options.data),

      header: {

        'Content-Type': 'application/json; charset=UTF-8'

        // 'x-token': 'x-token'  // 看自己是否需要

      },

      success(request) {

        if (request.data.error_code === 0) {

          resolve(request.data)

        } else {

          reject(request.data)

        }

      },

      fail(error) {

        reject(error.data)

      }

    })

  })

}

const gets = (url, options = {}) => {

  return request(url, { method: 'GET', data: options })

}

const post = (url, options) => {

  return request(url, { method: 'POST', data: options })

}

const put = (url, options) => {

  return request(url, { method: 'PUT', data: options })

}

// 不能聲明DELETE（關鍵字）

const remove = (url, options) => {

  return request(url, { method: 'DELETE', data: options })

}

mole.exports = {

  gets,

  post,

  put,

  remove

}

如何使用請看下圖

數據獲取

數據展現如下圖

數據展現

到此，第三個問題我們就解決的了下面看第四個問題。

小程序發布文檔說明

小程序發布步驟

到此四個問題都解決了。

總結：本文內容是很簡單的，借用了大部分官方文檔，其實本文目的不是教你學小程序開發，而是分享一下在學習一項新事物我的方法和思路，互聯網技術變化是很快的，我覺得一個人的能力，不僅僅是你技術有多好，你要明白技術是用來干什麼的，技術是用來解決現實生活中的問題的，一個好的程序員，不是技術能力，而是解決問題的能力，解決問題不可能只用一種技術，這就要求你的學習能力要強，針對不同的問題，使用不同的技術，哪怕使用的技術你不熟悉，但它是解決問題最好的方法，那就要求你有快速學習並解決問題的能力。

學習一項新技術，我們要先抓住主線，把流程搞通了，以後再在工作中慢慢的熟悉和豐富對它細節的一些認知，所以學一項東西前多問自己幾個問題，我學什麼，我為什麼學，我怎麼學，等。先思考後學習，一定會讓你事半功倍。

對於怎麼學習微信小程序開發，我問了自己上面的四個問題，每個問題，我只需要了解大體內容，四個問題都解決了，然後整個流程也就通了，以後也就是慢慢的對每個問題內容的細節慢慢的熟悉和了解了，其實花了不到一下午的時間，我就搞出了一個簡單的demo出來了，了解的內容基本已經覆蓋微信小程序日常開發80%的內容了。以上就是我的一點學習心得。

最後 小程序Demo

Demo截圖

首頁

我的

點擊我的任意條目，數據是從第三方聚合平台提供的api獲取的

最後目前有很多的多端開發框架，背景大多是都是因為小程序開發的盛行

其他還有很多例如

阿里的rax

我們自己的ditto

❸ 我用C#寫好了一個小程序，怎樣將它打包成應用程序，就是可以在別的電腦直接點擊了就運行 具體點，謝謝了

DotNet（C# ）系統安裝程序製作StepByStep（包括FrameWork安裝和資料庫安裝...

如果你的程序不涉及資料庫，則跳過資料庫的部分。

首先需要把你要建立的資料庫表結構導出來，使用slqserver的導出向導導出表結構，先保存到db.sql文件中吧。

可選步驟：安裝Framework引導程序插件。
安裝了這個插件你製作的安裝包就通過 Microsoft Visual Studio .NET 2003 引導程序插件，您可以輕而易舉地創建安裝程序，將 .NET Framework 1.1隨您的應用程序一起重新分發。
引導程序插件 PluginInstaller.msi 的下在地址：
http://www.microsoft.com/downloads/details.aspx?FamilyID=627921a0-d9e7-43d6-a293-72f9c370bd19&displaylang=zh-cn
第一步：創建部署項目
1. 在「文件」菜單上指向「添加項目」，然後選擇「新建項目」。
2. 在「添加新項目」對話框中，選擇「項目類型」窗格中的「安裝和部署項目」，然後選擇「模板」窗格中的「安裝項目」。在「名稱」框中鍵入 Setup。
3. 單擊「確定」關閉對話框。
4. 項目被添加到解決方案資源管理器中，並且文件系統編輯器打開。

第二步：創建安裝程序類
1. 在「文件」菜單上指向「新建」，然後選擇「項目」。
2. 在「新建項目」對話框中，選擇「項目類型」窗格中的「項目」，然後選擇「模板」窗格中的「類庫」。在「名稱」框中鍵入 DBCustomAction。
3. 單擊「打開」關閉對話框。
4. 從「項目」菜單中選擇「添加新項」。
5. 在「添加新項」對話框中選擇「安裝程序類」。在「名稱」框中鍵入 DBCustomAction。
6. 單擊「確定」關閉對話框。（代碼附後）
第三步：將項目的輸出添加到部署項目中
1. 在「文件系統編輯器」中，選擇「應用程序」文件夾。在「操作」菜單上，指向「添加」，然後選擇「項目輸出」。
2. 在「添加項目輸出組」對話框中，選擇「項目」下拉列表中你的項目。
3. 單擊「確定」關閉對話框。
4. 從列表中選擇「主輸出」，然後單擊「確定」。
第四步：創建自定義安裝對話框
1. 在解決方案資源管理器中選擇「Setup」項目。在「視圖」菜單上指向「編輯器」，然後選擇「用戶界面」。
2. 在用戶界面編輯器中，選擇「安裝」下的「啟動」節點。在「操作」菜單上，選擇「添加對話框」。
3. 在「添加對話框」對話框中，選擇「許可協議」對話框，然後單擊「確定」關閉對話框。
4. 在「添加對話框」對話框中，選擇「文本框 (A)」對話框，然後單擊「確定」關閉對話框。
5. 在「操作」菜單上，選擇「上移」。重復此步驟，直到「文本框 (A)」對話框位於「安裝文件夾」節點之上。
6. 在「屬性」窗口中，選擇 BannerText 屬性並鍵入：安裝資料庫.。
7. 選擇 BodyText 屬性並鍵入：安裝程序將在目標機器上安裝資料庫。
8. 選擇 Edit1Label 屬性並鍵入：資料庫名稱:。
9. 選擇 Edit1Property 屬性並鍵入 CUSTOMTEXTA1。
10. 選擇 Edit1Value 屬性並鍵入：GsCrm。
11. 選擇 Edit2Label 屬性並鍵入：伺服器名:。
12. 選擇 Edit2Property 屬性並鍵入 CUSTOMTEXTA2。
13. 選擇 Edit2Value 屬性並鍵入：(local)。
14. 選擇 Edit3Label 屬性並鍵入：用戶名:。
15. 選擇 Edit3Value 屬性並鍵入：sa。
16. 選擇 Edit3Property 屬性並鍵入 CUSTOMTEXTA3。
17. 選擇 Edit4Label 屬性並鍵入：sa用戶密碼:。
18. 選擇 Edit4Property 屬性並鍵入 CUSTOMTEXTA4。

第五步：創建自定義操作
1. 在解決方案資源管理器中選擇「Setup」項目。在「視圖」菜單上指向「編輯器」，然後選擇「自定義操作」。
2. 在自定義操作編輯器中選擇「安裝」節點。在「操作」菜單上，選擇「添加自定義操作」。
3. 在「選擇項目中的項」對話框中，雙擊「應用程序文件夾」。
4. 選擇「主輸出來自 DBCustomAction（活動）」項，然後單擊「確定」關閉對話框。
5. 在「屬性」窗口中，選擇 CustomActionData 屬性並鍵入 /dbname=[CUSTOMTEXTA1] /server=[CUSTOMTEXTA2] /user=[CUSTOMTEXTA3] /pwd=[CUSTOMTEXTA4] /targetdir="[TARGETDIR]\"。
附/targetdir="[targetdir]\"是安裝後的目標路徑，為了在dbcustomaction類中獲得安裝後的路徑，我們設置此參數。
另外，安裝後的路徑也可以通過Reflection得到：
Dim Asm As System.Reflection.Assembly = _
System.Reflection.Assembly.GetExecutingAssembly
MsgBox("Asm.Location")

第六步：添加db.sql以及你需要的其他文件到項目中，然後就可以打包了。

還 有最重要的一個問題，當時困擾了我三個多小時，就是用.net這個程序打包的程序，安裝過程用戶所選擇的安裝路徑中是不能含有空格的。為什麼呢？原來是 sql server的osql的執行命令行方式的時候，如果你的安裝路徑中含有空格的話，那個命令行是不能正確的執行的。「osql -U userId -P password -d dbname -i c:\test\db.sql」

另外安裝的時候也可以直接修改安裝後的app.config來完成你的配置，李洪根的文章中有相關介紹。

DBCustomAction.cs

using System;
using System.Data.SqlClient;
using System.Collections;
using System.ComponentModel;
using System.Configuration.Install;

namespace DBCustomAction
{
/// <summary>
/// DBCustomAction 的摘要說明。
/// </summary>
[RunInstaller(true)]
public class DBCustomAction : System.Configuration.Install.Installer
{
/// <summary>
/// 必需的設計器變數。
/// </summary>
private System.ComponentModel.Container components = null;

public DBCustomAction()
{
// 該調用是設計器所必需的。
InitializeComponent();

// TODO: 在 InitializeComponent 調用後添加任何初始化
}

/// <summary>
/// 清理所有正在使用的資源。
/// </summary>
protected override void Dispose( bool disposing )
{
if( disposing )
{
if(components != null)
{
components.Dispose();
}
}
base.Dispose( disposing );
}

#region 組件設計器生成的代碼
/// <summary>
/// 設計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// </summary>
private void InitializeComponent()
{
components = new System.ComponentModel.Container();
}
#endregion

private void ExecuteSql(string connStr,string DatabaseName, string Sql)
{
SqlConnection conn = new SqlConnection(connStr);
SqlCommand cmd = new SqlCommand(Sql, conn);

conn.Open();
conn.ChangeDatabase(DatabaseName);
try
{
cmd.ExecuteNonQuery();
}
finally
{
conn.Close();
}
}

public override void Install(System.Collections.IDictionary stateSaver)
{
base.Install(stateSaver);
try
{
//------------------------建立資料庫----------------------------
string connStr = string.Format("data source={0};user id={1};password={2};persist security info=false;packet size=4096", this.Context.Parameters["server"], this.Context.Parameters["user"], this.Context.Parameters["pwd"]);
ExecuteSql(connStr, "master", "CREATE DATABASE " + this.Context.Parameters["dbname"]);

System.Diagnostics.Process sqlProcess = new System.Diagnostics.Process();
sqlProcess.StartInfo.FileName = "osql.exe";
sqlProcess.StartInfo.Arguments = string.Format(" -U {0} -P {1} -d {2} -i {3}db.sql", this.Context.Parameters["user"], this.Context.Parameters["pwd"], this.Context.Parameters["dbname"], this.Context.Parameters["targetdir"]);
sqlProcess.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
sqlProcess.Start();
sqlProcess.WaitForExit(); //等待執行
}
catch(Exception e)
{
Console.Write(e.ToString());
}
finally
{
}
}
}
}

第六步：添加db.sql以及你需要的其他文件到項目中，然後就可以打包了。

還 有最重要的一個問題，當時困擾了我三個多小時，就是用.net這個程序打包的程序，安裝過程用戶所選擇的安裝路徑中是不能含有空格的。為什麼呢？原來是 sql server的osql的執行命令行方式的時候，如果你的安裝路徑中含有空格的話，那個命令行是不能正確的執行的。「osql -U userId -P password -d dbname -i c:\test\db.sql」

另外安裝的時候也可以直接修改安裝後的app.config來完成你的配置，李洪根的文章中有相關介紹。

DBCustomAction.cs

using System;
using System.Data.SqlClient;
using System.Collections;
using System.ComponentModel;
using System.Configuration.Install;

namespace DBCustomAction
{
/// <summary>
/// DBCustomAction 的摘要說明。
/// </summary>
[RunInstaller(true)]
public class DBCustomAction : System.Configuration.Install.Installer
{
/// <summary>
/// 必需的設計器變數。
/// </summary>
private System.ComponentModel.Container components = null;

public DBCustomAction()
{
// 該調用是設計器所必需的。
InitializeComponent();

// TODO: 在 InitializeComponent 調用後添加任何初始化
}

/// <summary>
/// 清理所有正在使用的資源。
/// </summary>
protected override void Dispose( bool disposing )
{
if( disposing )
{
if(components != null)
{
components.Dispose();
}
}
base.Dispose( disposing );
}

#region 組件設計器生成的代碼
/// <summary>
/// 設計器支持所需的方法 - 不要使用代碼編輯器修改
/// 此方法的內容。
/// </summary>
private void InitializeComponent()
{
components = new System.ComponentModel.Container();
}
#endregion

private void ExecuteSql(string connStr,string DatabaseName, string Sql)
{
SqlConnection conn = new SqlConnection(connStr);
SqlCommand cmd = new SqlCommand(Sql, conn);

conn.Open();
conn.ChangeDatabase(DatabaseName);
try
{
cmd.ExecuteNonQuery();
}
finally
{
conn.Close();
}
}

public override void Install(System.Collections.IDictionary stateSaver)
{
base.Install(stateSaver);
try
{
//------------------------建立資料庫----------------------------
string connStr = string.Format("data source={0};user id={1};password={2};persist security info=false;packet size=4096", this.Context.Parameters["server"], this.Context.Parameters["user"], this.Context.Parameters["pwd"]);
ExecuteSql(connStr, "master", "CREATE DATABASE " + this.Context.Parameters["dbname"]);

System.Diagnostics.Process sqlProcess = new System.Diagnostics.Process();
sqlProcess.StartInfo.FileName = "osql.exe";
sqlProcess.StartInfo.Arguments = string.Format(" -U {0} -P {1} -d {2} -i {3}db.sql", this.Context.Parameters["user"], this.Context.Parameters["pwd"], this.Context.Parameters["dbname"], this.Context.Parameters["targetdir"]);
sqlProcess.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
sqlProcess.Start();
sqlProcess.WaitForExit(); //等待執行
}
catch(Exception e)
{
Console.Write(e.ToString());
}
finally
{
}
}
}
}

❹ 微信小程序自定義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的范圍問題了。 

❺ 微信小程序之組件

一.創建並使用組件的步驟

1.創建一個文件夾存放組件，並在裡面創建一個組件文件夾，components，tabs

2.在tabs文件里添加組件模板

3.引用組件，在父組件的json文件中的usingComponents中添加子組件路徑，compont

4.使用組件，相當於正常標簽進行使用

二.父組件向子組件傳參的步驟

父組件給子組件的tabs傳入對象

1.父組件的數據

2.子組件做的操作

如果沒有傳入數據，就會輸出默認值value

3.子組件展示對象數據：

三.子組件向父組件傳參的步驟

1.先給子組件添加一個點擊事件

2.通過this.triggerEvent("自定義事件名稱",{傳的值})命令保證子組件和父組件同步被修改

3.父組件綁定子組件，定義一個事件名稱，用來接收子組件傳遞的數據

❻ 怎樣在微信上製作小程序

一、擁有凡科網帳號，並開通輕站小程序

如果您還沒有凡科網帳號，請進入官網中點擊頁面右上角按鈕進行注冊，開通輕站小程序。

如果您已開通輕站小程序，請通過您的帳號密碼登錄進入【企業中心-輕站小程序-概況-設計小程序】開始基本搭建操作。

二、復制模板，快速搭建小程序

凡科輕站提供大量精美模板，覆蓋多種行業，通過「更換模板」可一鍵復制現成的模板搭建小程序，省時省力省心！

三、完善小程序內容

通過模板搭建了小程序的框架後，還可以自行添加多種模塊，完善小程序內容。

四、授權小程序帳號

凡科輕站支持同時發布微信小程序和網路小程序，發布前，需要將對應的小程序帳號授權給凡科輕站。

五、發布小程序

操作完以上步驟後，輕站小程序就基本搭建完成了，可以在「設計小程序」頁面頂部，點擊「審核發布」，將小程序發布至線上，發布成功後其他人即可訪問小程序。

六、推廣小程序

小程序成功發布後，如何推廣、傳播、獲取流量是關鍵。

微信小程序可通過智能名片、商機雷達、公眾號跳轉、微信搜索、小程序分享、附近的小程序等方式推廣小程序。

網路小程序可通過百家號嵌入小程序、配置網路自然搜索等方式推廣小程序。

400+精美小程序模板，點擊這里馬上獲取：凡科輕站小程序

❼ 微信小程序從入門到學會第七天-小程序的自定義組件

當我們多次使用同一個組件的時候，我們可以將其進行封裝然後進行使用，這個時候，自定義組件就起到了很好的作用，前面雖然我們講到了自定義組件，不過那都是皮毛，僅僅只是講到了自定義組件的創建和使用罷了，下面我們來深入剖析自定義組件。首先看下目錄：

匿名插槽

具名插槽

外部樣式

多樣化的組件通信

1.雙向綁定

2.父子組件互相傳

組件共享

組件關系

生成的組件實例可以在組件的方法、生命周期函數和屬性 observer 中通過 this訪問。組件還有一些通用屬性和方法，如下：

註：以上內容來源於微信開放文檔 二、自定義組件的參數

生成的組件實例可以在組件的方法、生命周期函數和屬性 observer 中通過 this訪問。組件還有一些通用屬性和方法，如下：

註：以上內容來源於微信開放文檔 二、自定義組件的參數

生成的組件實例可以在組件的方法、生命周期函數和屬性 observer 中通過 this訪問。組件還有一些通用屬性和方法，如下：

註：以上內容來源於微信開放文檔 二、自定義組件的參數

生成的組件實例可以在組件的方法、生命周期函數和屬性 observer 中通過 this訪問。組件還有一些通用屬性和方法，如下：

❽ 微信小程序組件化開發

微信小程序的組件和Vue的組件非常相似。

在微信小程序中有很多內置組件，比如button view input image等，有時候我們要自定義組件。和Vue的組件似的。

如何創建自定義組件：
新建一個components目錄，在里邊創建自定義組件

組件的組成：

使用組件：

一個簡單的示例：
創建comp，代表頁面；創建components/xxxx，代表組件。

創建組件：

使用組件：

注意：json文件中不能寫注釋啥的。這里的注釋是為了解釋清楚，在開發中不能寫注釋。

組件的注意事項：

組件的樣式細節：

如何控制頁面和組件的樣式相互影響：

組件和頁面相互通信

this.triggerEvent(事件名，參數對象，{})，最後是options，額外的一些選項

預留一個設備，以有利於對以後進行擴展。
好處：

例子：
在移動端，導航欄，nav-bar，分為左中右三部分。不把這三部分的內容寫死。就用插槽，為了封裝性更好。

單個插槽的使用很簡單：

多個插槽的使用稍微復雜，要設置幾個東西：

component構造器中可以寫哪些東西，如下