做一个小程序生成平台需要掌握哪些技术

题主，您好：

现在市场上有许多这样的平台，比如说，即速应用，轻芒小程序+，上线了，小鹅通，这些都能够生成自己的小程序，不过不同平台可能针对的领域有差别，比如轻芒小程序，专注为内容创作者，快速生成小程序，小鹅通是专注于知识领域的，这些深耕于细分领域的都做的不错。

#如何去实现这样的平台#生成小程序与生成网页应用类似，只不过生成小程序，是按照微信的规则，去写相应的组件。

第一步，首先你要将你支持用户拖拽的模块提前写出来，也称模板区域，这些代码也就是你在小程序中实现的代码，通过HTML+CSS展示在你前端页面，当用户拖拽的时候用到的是Html5的拖拽效果，可以参考W3S的这个链接：html5/html_5_draganddropasp

第二步，当我们将模板区域的组件拖动的到设计区域，这个区域要生成相应的小程序组件，并且展示出来

这上面仅仅只是说明了怎么去实现，第一步，写好组件模板，第二步，实现拖拽，第三步，生成组件代码，这些只是理论知识，真正去实现过程中比这里的复杂情况多的多

所以这里只能给你推荐一下你可能用的到的技术，链接如下：

Vue-Layout:vue可视化布局、自动生成代码

对于基础者的话，难度可能是相当大的，希望加油！

一、wxsetNavigationBarTitle

1设置整个小程序通用标题，在appjson里设置：

"window": {

"navigationBarTitleText": "默认标题"

}

复制

2单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：

{

"navigationBarTitleText": "首页"

}

复制

3动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上

wxrequest({

url: "请求接口url",

method: "POST",

data: {},

success: function (res) {

if (resdatacode == 200) {

// 修改navigationBarTitleText

wxsetNavigationBarTitle({

title: goods_name

})

}

}

})

复制



tips：动态设置 > 页面独立设置 > 通用设置

效果图：

当然，另外我们可以通过点击事件来动态设置标题：

test: function () {

wxsetNavigationBarTitle({

title: "我是点击后的标题"

})

}

复制

效果图：

二、wxsetNavigationBarColor

设置页面导航条颜色

wxsetNavigationBarColor({

frontColor: '#ffffff',

backgroundColor: '#ff0000',

animation: {

duration: 400,

timingFunc: 'easeIn'

}

})

复制

frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor：背景颜色值，有效值为十六进制颜色

animation：动画效果

①animation的结构包括：duration，timingFunc；

②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）

效果图：

三、wxshowNavigationBarLoading和wxhideNavigationBarLoading

wxshowNavigationBarLoading：在当前页面显示导航条加载动画

wxhideNavigationBarLoading：在当前页面隐藏导航条加载动画

indexwxml

<button bindtap="showLoading">显示加载动画</button>

<button bindtap="hideLoading">隐藏加载动画</button>

复制

indexjs

// 显示加载动画

showLoading: function () {

wxshowNavigationBarLoading()

},

// 隐藏加载动画

hideLoading: function () {

wxhideNavigationBarLoading()

}

复制

效果图：

四、wxhideHomeButton

隐藏返回首页按钮。微信707版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

上一节为大家介绍了页面间的传值

这一节继续我们的开发流程，这节课我们来实现“新增动态”页面的实现

实现效果：

首先我们在appjson中新增页面路径

编译之后生成目录及4个文件

引用的第三方js文件“qiniuUploaderjs”

发表成功之后，onfireon（"reloadDynamicFunction''）;

发送订阅消息，让homejs触发刷新数据的事件。

内容浅显易懂，有问题随时提问~

下一节：

传送门：

十四：动态详情页面的实现与分析

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

2点击打开小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周边的小程序。

下面的小程序列表可以看到的是我们之前打开过的一些小程序，如果有自己觉得很好用的小程序就可以点击左上角，添加到我的小程序里面。

3微信小程序还有具有搜索功能，打开搜索页面可以输入想要找的小程序。

12月16日，微信正式发布了WeUIjs动态视觉组件库。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，可以让用户的使用感知更加统一。WeUIjs动态视觉组件库包含了button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。

一、weuijs是什么？

weuijs是WeUI的轻量级JS封装，不需要依赖其它库，GZIP后仅有90 KB。

二、weuijs包含哪些组件？

actionsheet

alert

confirm

dialog

form

gallery

loading

picker

searchbar

slider

tab

toast

toptips

uploader

三、使用方式：

Github：>

微信小程序一开始只有1mb的上传大小，后来应广大民众要求加到了2mb，可这对于大一些的小程序可能就不够了，特别是有用到很多的就更不够了，那怎么办呢？

这里我用的是wepy，为了方便引入，设置了前缀，但在一个wpy文件中，style和script要分别引入

如下

commonless:

configjs:

对于commonless,本来已经在appwpy引入过了，理论上应该是所有页面都不用再引入的，对于commonless中的一些样式如loading{}确实全部页面都有用，但是对于定义的变量如@imgHost:" >

微信小程序开发聊天功能你可以直接接入即构科技的im sdk，1天内可在小程序内实现聊天功能，可跨平台兼容。常见一对一、多对多的私人聊天、公共群聊，聊天室以及音视频通话功能都可支持，有需要的可以去了解了解