uileader / touchwx Goto Github PK

View Code? Open in Web Editor NEW

838.0 34.0 177.0 391 KB

小程序组件化解决方案。官网：https://www.wetouch.net/wx.html

License: MIT License

CSS 99.62% JavaScript 0.38%

touchwx's Introduction

Touch WX

Touch WX部分组件

介绍

Touch WX是一套完全免费的微信小程序开发框架，包含丰富的UI控件用于官方组件的补充。特点如下：

1、组件扩充：

增加了30多种常用的组件用于官方组件的补充。

2、功能扩充：

兼容阿里的iconfont图标库，海量矢量图标随意使用；补充了常用样式库、支持less语法、支持全局配置主题色等

3、开发体验改善：

四文件方式改为单文件方式，通过VSCode编辑器+插件的方式开发，拥有web开发体验；

4、小程序转为H5应用：

可以与H5开发框架Touch UI工程相互转换，发布成webApp。开发一套代码，拥有两套应用。

这套框架的原理是：

将Touch WX工程中所写的代码进行编译，直接输出为微信小程序工程原始代码。扩充的30多种组件，完全是基于小程序官方的自定义组件机制实现（row&col除外）。

所以它支持小程序的全部语法，怎么开发小程序，就怎么开发Touch WX。

不过因为是单文件的开发方式，在文件的代码结构上稍有不同。请注意这一点。

这样好处在于：

1、开发者迁移成本很小。

可以轻松的将已有的小程序移植为Touch WX工程，来使用它的扩展能力；

2、便于排查错误。

当遇到问题时，开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题；

3、按需编译

由于小程序对体积有限制，在使用框架开发时，只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。

4、不会对框架产生依赖。

以后不想用了这套框架，可以直接对已经输出的小程序工程进行维护。

注意事项

如果已经之前已经使用过Touch WX，运行过基础工程，可以跳过1、2步骤，直接开始第3步。

1、在本地运行代码时，需要安装Touch WX插件。

2、全局安装touchui-wx-cli

npm install -g touchui-wx-cli

3、右键，将该项目识别为Touch WX工程。

4、右键，安装项目依赖。如果没有成功的安装项目依赖，会报如下错误。

详情可以参考下面的Touch WX文档。

环境安装：“入门 >> 起步 >> 环境安装”

第一个程序：“入门 >> 起步 >> 第一个程序”

文档

中文文档

Demo

讨论组

加下面的小助手微信进交流群。

touchwx's People

Contributors

Stargazers

Watchers

Forkers

lancexugood haystacks hmliu redfeng horjer diycp zhaoshuai2018 emaiqi azkoss joncv gitjunyang xianhaosui haotian2546 hythzx uranuslei liucunzhou wibin86 rnstart githubyangwei wenco o0teamo0o udwiki zhangdongfarmer neil-orzzh qimingnan sdtm1016 andyoung getive sosojustdo fingthinking jay412109606 mvpleung shiliuxing jasmine-ring easy-wxapp yataozhang git10135405 liangmc89 hgt803 aerialknee xasealand six006 yufan2014 sky315sky mn3711698 fcgll520 mrxiaoyu100001 hunnad aonthly xie1701 jialingwei xinyang-pan zengzehui magic-coder parkerwen enjoydegame bxq2013 alex3076 superjonz hzp-ui yunlong2cn magicyork shadow52 liu279 kenyou chuangdao einstein-github lvcodeing andygoo softlover qianduanheiye cuitymiko git-lt huyulei xyz1041931294 xueyan1 zhoujian1210 bukecn chenkefeng godchenmeng caopeirui koyo527 itwmang kylelkh danielcodeing li496670613 red4cn zhyzhy greatdreamzc vacuole1989 iwaller vnsproject zhujingling wyy7hao dragonxu davidalphafox lastlastweek mencomao gaogaoyanjiu feitianyiren

touchwx's Issues

脚手架安装错误

npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Support has ended for 9.x series. Upgrade to @latest
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npm.taobao.org/postcss-bem
npm ERR! 404
npm ERR! 404 'postcss-bem@^0.4.1' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'touchui-wx-cli'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

使用百度图表echarts小程序版本，打包时没有全部把ec-canvas目录下所有文件打包到dist目录下

请问有办法把packages下某个目录全部文件全部打包到dist目录下吗？

ui-accordion 默认显示展开的方法

然后在组件component里面，注释这一行。ready的function会在这之后运行，导致获取到的height为0.

Javascript代码中需要用到image本地路径，那么能在项目中添加本地的image文件吗？能的话应该放到哪？

npm install -g touchui-wx-cli无法安装

什么时候支持分包加载

touchui-wx-cli: tui init 时问过小程序appid，但并未保存到json里

touchui-wx-cli (v1.1.6): tui init 时问过小程序appid，但并未保存到json里
即使手动加在min.config.json里也没什么用
build里也没有project.config.json

edit:
而且麻烦的是重新build时，已有的project.config.json会被删除

是否支持vuex

想问一下是否支持vuex?另外像flyio这类的网络请求框架支不支持呢？谢谢。

vetur e 和 touch wx冲突, 当执行 tui dev 后, vue language server 停止

开始 vue language service 正常启动,格式化代码没问题, 当启动服务 tui dev 后,vue language service 就不见了,格式化代码失效, 卸载这个两个插件,重新安装也无效, 但是偶尔有可以,时灵时不灵. vscode for mac 又正常

动态 images 打包不了

动态 images 打包不了，反正写在 js 中或者 html 里用变量的都无法打包到 dist 目录

在哪里更改项目输出路径

就是修改dist的路径

运行touchwx demo项目，在小程序开发工具执行dist后报错

no such file or directory, open 'E:\dist\game.json' game.json文件就没有生成啊

node 版本过低

创建基础项目时，拓展提示 node 版本过低，本地环境：

Mac 10.13.4 + VS Code 1.23.1 + Node 10.2.1 + yarn 1.7.0 + touchui-wx-cli 1.1.6

win10 启动开发服务频繁报错

PS C:\Users\Mestc\source\repos\LoveU-background> tui dev

(node:4652) UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty, rmdir 'C:\Users\Mestc\source\repos\LoveU-background\dist\pages'
at Object.rmdirSync (fs.js:769:3)
at rmkidsSync (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\node_modules\fs-extra\lib\remove\rimraf.js:304:27)
at rmdirSync (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\node_modules\fs-extra\lib\remove\rimraf.js:281:7)
at Object.rimrafSync [as removeSync] (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\node_modules\fs-extra\lib\remove\rimraf.js:252:7)
at C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\node_modules\fs-extra\lib\empty\index.js:39:12
at Array.forEach ()
at Object.emptyDirSync (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\node_modules\fs-extra\lib\empty\index.js:37:9)
at Xcx. (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\lib\class\Xcx.js:33:20)
at Generator.next ()
at fulfilled (C:\Users\Mestc\AppData\Roaming\npm\node_modules\touchui-wx-cli\lib\class\Xcx.js:4:58)
(node:4652) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node
process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:4652) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

touchuiwx 支持跟mpvue、wepy 等进行整合吗？

如果可以的话，有没有相关的示例呢？

创建的项目中css重复？

我看见在static下的styles中的components.less和icon.less都存在@font-face，两者没区别，为什么都有？

集成Echats，空白。有没有交流的地方啊

集成Echats，空白。有没有交流的地方啊。

无法自定义组件？？

我在项目的根目录下，创建了一个packages的文件夹，然后创建了一个cc-test.wxc，编译后看不到文件，也看不到控制台输出有编译信息？？

定义babBar提示找不到图片资源我文件夹和app.wxa同层级

什么原因呢为啥文档上没有相应的组件介绍页

级联选择器bug

设备：iphone6
微信版本：6.6.7
描述：级联选择打开状态下能够上下随意拖动，是什么鬼？

求助，级联选择器使用程序中自带的 city.js ，选择第三层时会出错，无法选择

如何使用云开发？

如题，云开发会在本地安装依赖。而有的时候出错需要删除整个dist，就要重新安装依赖了。

小程序原生转化成touchwx解决方案

我想问一下，我们现在用小程序原生已经开发成熟的微信小程序，想转化成touchwx进行后续的开发和迭代，不知道应该怎么操作，我看文档上只是说了一句可以转化，具体怎么操作没有说，请问大佬们可以给介绍一下吗。这么好的框架箱入手啊！！！！谢谢

大哥 windows连脚手架都装不上啊

组件的样式如何修改，比如 shadow-root 中节点样式修改后都不生效

自定义组件无法定义超过一个

使用各种方法都无法找到第二个自定义组件，当前tui版本是1.1.6。不知是否我使用有问题，求高人指点。。

刻度尺在Andriod下，会出现水平滚动条的问题

刻度尺在Andriod下，会出现滚动条。在iOS下没有，这个视图不一致。
刻度尺是不是用scroll-view组件？
有什么解决方法没

怎么修改组件的样式？能否给个你们规定样式的文档？

例如
这个fixed-width 用户不知道怎么用，改又改不了。。

并没有做到全部都可以用原声小程序

建议出一个兼容wepy版本的组件库。

ui-popup存在滚动条穿透问题

在system 定义的全局变量，在某些手机上面无法获取到，是怎么回事？

在system.js里面定义一个函数，wx.fn = function(){
}
在一些安卓手机上面调试的时候，调用找不到，一直报错，怎么回事呢？

官网开发文档挂了，404了

推起来啊，这个解决小程序的单文件。很不错

推起来啊，这个解决小程序的单文件。很不错推起来啊，这个解决小程序的单文件。很不错推起来啊，这个解决小程序的单文件。很不错

滑动菜单容器 swipe-out 的 content 插槽的问题

如不设置背景色， operate 插槽下半超过50像素部分会始终显示

微信开发工具版本: 1.02.1811150
os: mac
tui -v: 1.1.6

ui-ruler has an error,when value="0" min="-200" max="200"

Error Code: at ui-ruler
ready () {
if (this.data.value) { //当 0 时,错误
this.data.selfValue = Number(this.data.value) - this.data.selfMin
} else {
this.data.selfValue = 0
}

this.data.leftForSure = this.data.selfValue * (this.data.selfLineWidth + this.data.selfStepWidth)

this.setData({
  selfValue : this.data.selfValue,
  leftForSure: this.data.leftForSure
})

},
Pass Code:
ready () {
if (this.data.value != null) {
this.data.selfValue = Number(this.data.value) - this.data.selfMin
} else {
this.data.selfValue = 0
}

this.data.leftForSure = this.data.selfValue * (this.data.selfLineWidth + this.data.selfStepWidth)

this.setData({
  selfValue : this.data.selfValue,
  leftForSure: this.data.leftForSure
})

},
attached () {
this.data.lineHeight = this.data.lineHeight || Number(this.data.height) / 4
this.data.keyLineHeight = this.data.keyLineHeight || Number(this.data.lineHeight) * 2

this.data.selfValueStyle = StyleHelper.getPlainStyle(this.data.valueStyle)

this.data.selfStepWidth = Number(this.data.stepWidth)
this.data.selfLineWidth = Number(this.data.lineWidth)
this.data.selfMin = Number(this.data.min)
this.data.selfMax = Number(this.data.max)
this.data.value = this.data.value
this.data.step = Number(this.data.step)
this.data.keyStep = Number(this.data.keyStep)
this.data.pointerWidth = Number(this.data.pointerWidth)
this.data.selfWidth = Number(this.data.width)
if (this.data.width) {
  this.data.selfWidth = Number(this.data.width)
} else {
  this.data.selfWidth = wx.getSystemInfoSync().windowWidth
}
this.data.padding = this.data.selfWidth / 2

if (!this.data.numberPadding) {
  this.setData({
    numberPadding: this.data.numberSize / 2,
  })
} else {
  this.setData({
    numberPadding: this.data.numberPadding,
  })
}
this.setData({
  lineHeight: this.data.lineHeight,
  keyLineHeight: this.data.keyLineHeight,
  selfValueStyle: this.data.selfValueStyle,
  selfStepWidth: this.data.selfStepWidth,
  selfLineWidth: this.data.selfLineWidth,
  selfMin: this.data.selfMin,
  selfMax: this.data.selfMax,
  value: this.data.value,
  step: this.data.step,
  keyStep: this.data.keyStep,
  pointerWidth: this.data.pointerWidth
})
this.setData({
  padding: this.data.padding,
  rulerWrapStyle: OTS(this.rulerWrapStyleObj()),
  rulerStyle: OTS(this.rulerStyleObj()),
  rulerPointerStyle: OTS(this.rulerPointerStyleObj()),
  scrollViewStyle: OTS(this.scrollViewStyleObj()),
  rulerPaddingStyle: OTS(this.rulerPaddingStyleObj()),
  numberPaddingStyle: OTS(this.numberPaddingStyleObj())
})

tui dev 不支持...?

export const uploadFile = (obj) => new Promise((resolve, reject) => {
  wx.uploadFile({
    ...obj,
    success(res) {
      resolve(res);
    },
    fail(e) {
      reject(e);
    }
  });
});

SyntaxError: unknown: Unexpected token (155:4)

ui-v-tabs 选中效果在真机上有问题，会报错

ui-v-tabs 选中效果在真机上有问题，会报错，在开发工具就正常。其实跟数据无关，只要一渲染就报错

<ui-v-tabs 
          height="{{tabHeight}}"
          tab-style="{{tabStyle}}"
          active-tab-style="{{activeTabStyle}}"
          class="tab-item"
          index="{{ current }}"
          data-key="current">
          <ui-v-tab wx:for="{{ tabItems }}" data-index="{{index}}" data-category="{{item.id}}" bindtap="handleChange">
            {{ item.name }}
          </ui-v-tab>
        </ui-v-tabs>