如何封装小程序组件

❶ 微信小程序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构造器中可以写哪些东西，如下