wechat-miniprogram / weui-miniprogram Goto Github PK
View Code? Open in Web Editor NEW小程序WeUI组件库
License: MIT License
小程序WeUI组件库
License: MIT License
哥哥!案例中使用的录音API使用的是停止维护的API。能来个新API的案例吗。。。不同环境下不同回调事件会不执行。。。心好累。
项目中为什么没用rich-text ?
【日志如下】:
npm ERR! path F:\dev\wx-xcx\study\weui-miniprogram-master\node_modules\less
npm ERR! code EISGIT
npm ERR! git F:\dev\wx-xcx\study\weui-miniprogram-master\node_modules\less: Appears to be a git repo or submo
dule.
npm ERR! git F:\dev\wx-xcx\study\weui-miniprogram-master\node_modules\less
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
npm ERR! A complete log of this run can be found in:
npm ERR! E:\dev\NodeJs\node-v8.4.0-win-x86\node-cache_logs\2019-08-17T17_53_25_690Z-debug.log
rules: [{ // 多个规则
name: 'password',
rules: [{
required: true,
message: '请输入密码'
}, {
minlength: 6,
message: '请输入最少6位长度的密码'
}],
}, { // 多个规则
name: 'confirm',
rules: [{
required: true,
message: '请再次输入密码'
}, {
equalTo: 'password',
message: '两次输入密码不一致'
}],
}]
例如:红米note4或者仿真器上的iPhone 5用navigation时7个字的标题变成两行
表单中先用的uploader 下面是cell里面的textarea
真机调试(iphone11)预览图片无法挡住textarea
在电脑上预览没有这个问题
`
<mp-cells title="产品简介">
<mp-cell show-error prop="idcard" title="" ext-class="">
<textarea bindinput="formInputChange" data-field="idcard" class="weui-textarea" placeholder="请输入产品介绍"/>
</mp-cell>
</mp-cells>`
点击按钮slideview 组件时出现以下异常信息
Component "components/slideview/slideview" does not have a method "function (nv_event,nv_ownerInstance){var nv_ins = nv_event.nv_instance;var nv_st = nv_ins.nv_getState();if (!nv_st.nv_size || !nv_st.nv_isMoving)return;;nv_st.nv_isMoving = false;var nv_btns = nv_ownerInstance.nv_selectAllComponents('.btn');var nv_len = nv_btns.nv_length;var nv_i = nv_len - 1;if (Math.nv_abs(nv_event.nv_changedTouches[(0)].nv_pageX - nv_st.nv_startX) < nv_st.nv_throttle || nv_event.nv_changedTouches[(0)].nv_pageX - nv_st.nv_startX > 0){nv_st.nv_out = false;nv_ins.nv_setStyle(({'nv_transform':'translate3d(0px, 0, 0)','nv_transition':'transform 0.4s',}));for(;nv_i >= 0;nv_i--){nv_btns[((nt_12=(nv_i),null==nt_12?undefined:'number'=== typeof nt_12?nt_12:"nv_"+nt_12))].nv_setStyle(({'nv_transform':'translate3d(0px, 0, 0)','nv_transition':'transform 0.4s',}))};nv_ownerInstance.nv_callMethod('hide');return};var nv_movex = nv_st.nv_max;nv_st.nv_out = true;nv_ins.nv_setStyle(({'nv_transform':'translate3d(' + (-nv_movex) + 'px, 0, 0)','nv_transition':'transform 0.4s',}));nv_st.nv_transformx = -nv_movex;var nv_transformTotal = 0;for(;nv_i >= 0;nv_i--){var nv_transform = nv_st.nv_size.nv_buttons[((nt_13=(nv_i),null==nt_13?undefined:'number'=== typeof nt_13?nt_13:"nv_"+nt_13))].nv_width / nv_st.nv_max * nv_movex;var nv_transformx = (-(nv_transform + nv_transformTotal));nv_btns[((nt_14=(nv_i),null==nt_14?undefined:'number'=== typeof nt_14?nt_14:"nv_"+nt_14))].nv_setStyle(({'nv_transform':'translate3d(' + nv_transformx + 'px, 0, 0)','nv_transition':'transform 0.4s',}));nv_st.nv_size.nv_buttons[((nt_15=(nv_i),null==nt_15?undefined:'number'=== typeof nt_15?nt_15:"nv_"+nt_15))].nv_transformx = nv_transformx;nv_transformTotal += nv_transform};nv_ownerInstance.nv_callMethod('show')}" to handle event "touchend".
请勾选需要的组件,并点击下载按钮下载组件库
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
C:\Users\Administrator\Desktop\weui-miniprogram-master>npm run init
> [email protected] init C:\Users\Administrator\Desktop\weui-miniprogram-master
> npm i && cd src/weui-wxss && npm i && gulp build:style && cd ../../ && npm run dev
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm ERR! code E404
npm ERR! 404 Not Found: @tencent/[email protected]
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-08-01T10_02_51_675Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] init: `npm i && cd src/weui-wxss && npm i && gulp build:style && cd ../../ && npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] init script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-08-01T10_02_51_743Z-debug.log
C:\Users\Administrator\Desktop\weui-miniprogram-master>
./miniprogram_npm/weui-miniprogram/slideview/slideview.wxml
Now you can provide attr wx:key
for a wx:for
to improve performance.
期望组件。
1、拖动排序组件
2、类似微信右上角 + 号点击弹出的冒泡菜单(发起群聊,添加朋友,扫一扫。。。)
3、局部上下刷新组件
rules: [{
name: 'title',
rules: [{
validator: function (rule, value, param, models) {
console.log('custom validator called: ', rule, value)
return false
},
message: '请填写标题'
}]
}],
自定义校验函数不会被执行
原因应该是 validator 被 continue 了
const validateSingleRule = (rule: any, value:any, param:any = null, models = null) => {
let message = ''
for (const ruleKey in rule) {
if (ruleKey === 'validator' || ruleKey === 'name' || ruleKey === 'message') continue
const validateMethod = typeof rule.validator !== 'undefined' ? rule.validator : Validator[ruleKey]
if (typeof validateMethod === 'function') {
message = validateMethod(rule, value, param, models)
if (message) {
return message
}
}
}
return message
}
gallery.wxml 里绑定 的 图片列表 应该是 currentImgs ,而不是 imgUrls
slideview展开状态怎么清除?想用他做购物车,感觉很难
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code E404
npm ERR! 404 Not found : @tencent/tslint-config-wxapp
npm ERR! 404
npm ERR! 404 '@tencent/tslint-config-wxapp' 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 'weui-miniprogram'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
toptips和navigation-bar一起用的时候被遮挡能否做一下这个兼容?
看到已经merge了修改,但是npm上还没有修复,是不是还没有推送到npm? 现在还是有问题
文档中只写不断调用search更新结果,但尝试resolve([])不能清除搜索结果。求解决
//手机号校验
{
name: 'mobile',
rules: [{
required: false,
message: '选填'
}, {
mobile: true,
message: "请填写正确的手机号"
}],
},
当 form 表单的 rule name 为 “name” 时,如下:
rules: [{
name: 'name',
rules: { required: true, message: '名称不能为空' },
}]
在不填写“名称 name”,也即 formData.name = null 时, valid 为 false
this.selectComponent('#form').validate((valid, errors) => {
console.log(valid, errors); // false ["name"]
})
显然的到的 errors 是不正确的。
正常的 errors 应该为
[{
message: "名称不能为空",
rule: { required: true, message: '名称不能为空' }
}]
如题
PS D:\WechatApps\weui-miniprogram-master> npm run dev
[email protected] dev D:\WechatApps\weui-miniprogram-master
gulp dev --develop
[19:12:29] Using gulpfile D:\WechatApps\weui-miniprogram-master\gulpfile.js
[19:12:29] Starting 'dev'...
[19:12:29] Starting 'weui-miniprogram-dev'...
[19:12:29] Starting 'weui-miniprogram-build'...
[19:12:29] Starting 'weui-miniprogram-clean-dist'...
[19:12:29] Finished 'weui-miniprogram-clean-dist' after 31 ms
[19:12:29] Starting 'weui-miniprogram-component-check'...
[19:12:29] Finished 'weui-miniprogram-component-check' after 102 ms
[19:12:29] Starting 'weui-miniprogram-component-wxml'...
[19:12:29] Starting 'weui-miniprogram-component-js'...
[19:12:29] Starting 'weui-miniprogram-component-less'...
[19:12:29] Starting 'weui-miniprogram-component-wxss'...
[19:12:29] Starting 'weui-miniprogram-component-json'...
[19:12:29] Starting 'weui-miniprogram-copy'...
[19:12:29] Starting 'weui-miniprogram-package-json'...
[19:12:29] Finished 'weui-miniprogram-component-js' after 433 ms
[19:12:29] Finished 'weui-miniprogram-component-wxss' after 451 ms
[19:12:29] Starting ''...
[19:12:29] Starting ''...
[19:12:29] Finished 'weui-miniprogram-package-json' after 489 ms
[19:12:29] Finished '' after 11 ms
[19:12:29] Finished '' after 11 ms
[19:12:29] Finished 'weui-miniprogram-copy' after 502 ms
[19:12:29] 'weui-miniprogram-component-wxml' errored after 552 ms
[19:12:29] Error: File not found with singular glob: D:/WechatApps/weui-miniprogram-master/src/weui-wxss/dist/style/weui.wxss (if this was purposeful, use allowEmpty
option)
at Glob. (D:\WechatApps\weui-miniprogram-master\node_modules\glob-stream\readable.js:84:17)
at Object.onceWrapper (events.js:297:20)
at Glob.emit (events.js:209:13)
at Glob.EventEmitter.emit (domain.js:476:20)
at Glob._finish (D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:197:8)
at done (D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:182:14)
at Glob._processSimple2 (D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:688:12)
at D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:676:10
at Glob.stat2 (D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:772:12)
at lstatcb (D:\WechatApps\weui-miniprogram-master\node_modules\glob\glob.js:764:12)
[19:12:29] 'weui-miniprogram-build' errored after 693 ms
[19:12:29] 'weui-miniprogram-dev' errored after 696 ms
[19:12:29] 'dev' errored after 701 ms
[19:12:29] The following tasks did not complete: weui-miniprogram-component-less, weui-miniprogram-component-json
[19:12:29] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: gulp dev --develop
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\scott.wan\AppData\Roaming\npm-cache_logs\2019-08-31T11_12_29_852Z-debug.log
左侧分类,右侧列表的这种
wx.getMenuButtonBoundingClientRect 在attached里面调用发现获取的值都为0.
在ready里面调用才用值,能否修复更新一下这个bug?
无论 prop 是否设置,都能正常校验。
<mp-form id="form" rules="{{rules}}" models="{{formData}}">
<mp-cells>
<!-- 这里的 prop ,即使不设置,也依然能正常校验 -->
<mp-cell prop="title">
<input value="{{formData.title}}" bindinput="formInputChange" data-field="title" class="weui-input" placeholder="请填写标题" />
</mp-cell>
<mp-cell>
</mp-form>
rules: [{
required: true,
message: '请填写标题'
},]
this.selectComponent('#form').validateField('title', (valid, errors) => {
console.log(valid, errors)
})
这里的回调会被执行 两次
// 第一次结果
false {message: "请填写标题"......}
// 第二次结果
false undefined
<view class="page">
<mp-slideview wx:for="{{list}}" wx:key="index" buttons="{{list[index].slide}}" bindbuttontap="slideButtonTap">
<mp-cell>{{item.index}}</mp-cell>
</mp-slideview>
</view>
list: [{
index: 0,
slide: [{
type: 'warn',
text: '删除',
data: 0
}]
},
{
index: 1,
slide: [{
type: 'warn',
text: '删除',
data: 1
}]
},
{
index: 2,
slide: [{
type: 'warn',
text: '删除',
data: 2
}]
}, {
index: 3,
slide: [{
type: 'warn',
text: '删除',
data: 3
}]
}
]
slideButtonTap(e) {
let index = e.detail.data
let list = this.data.list
list.splice(index, 1)
this.setData({
list: list
})
console.log('slide button tap', e.detail)
}
如题
由于使用了 vue 的 v-if 导致自定义 footer 无法显示
<view class="{{extClass}}">
<view wx:if="{{title}}" class="weui-cells__title">{{title}}</view>
<view class="weui-cells weui-cells_after-title {{checkboxCount > 0 && checkboxIsMulti ? 'weui-cells_checkbox' : ''}}">
<slot></slot>
</view>
<view v-if="{{footer}}" class="weui-cells__tips">{{footer}}</view>
<template v-else><slot name="footer"></slot></template>
</view>
Error: File not found with singular glob: /Users/XX/WeChatProjects/weui-miniprogram/src/weui-wxss/dist/style/weui.wxss (if this was purposeful, use allowEmpty
option)
app.wxss中
@import "./weui-miniprogram/weui-wxss/dist/style/weui.wxss";
报错 File not found
const { Math, Object } = primordials;
^
ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (/Volumes/apple/source/github/weui-miniprogram/src/weui-wxss/node_modules/natives/index.js:143:24)
at Object.req [as require] (/Volumes/apple/source/github/weui-miniprogram/src/weui-wxss/node_modules/natives/index.js:55:10)
at Object. (/Volumes/apple/source/github/weui-miniprogram/src/weui-wxss/node_modules/graceful-fs/fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
at require (internal/modules/cjs/helpers.js:16:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
导入 demo 文件夹后,启动项目报错:
Error:
in File: ./app.wxss
File not found ./components/weui-wxss/dist/style/weui.wxss
目前的:
{
"usingComponents": {}
}
修改后的:
{
"component": true,
"usingComponents": {}
}
应当在文档中标注,mp-tabbar的list中iconPath与selectedIconPath两项,不是以当前page的相对路径为准,而是以miniprogram_npm中的组件文件来计算相对路径。
当前文档中未明确注明,容易让新手以为是以当前page的js为相对路径的,导致mp-tabbar中图片一直无法正常显示
我不确定是 bug 还是我的使用方法有问题,如果是用错了,希望能够补充一下正确的使用范例,目前文档中没有 validator 相关的 demo 。
form rules 配置如下:
[
{
name: "cardNo",
rules: { validator: bankNoValidator }
}
]
但 bankNoValidator 没有被调用,追溯到这里发现问题:
ruleKey 为 validator 会被跳过,也就是说我必须再设置一个 message name 以外的字段才能让 validator 生效。按照文档,别的字段要么是内置校验规则,要么没有意义。如果是内置规则,下一条语句又会让内置规则失效,只执行 validator ,想不通这段逻辑的目的。
<view class="weui-gallery__opr" wx:if="{{delete}}"> <navigator href="javascript:" bindtap="deleteImg" class="weui-gallery__del">删除</navigator> </view>
`
ERROR in ./node_modules/weui-miniprogram/miniprogram_dist/gallery/gallery.wxml?__resource=D:/personal/mpx/node_modules/weui-miniprogram/miniprogram_dist/gallery/gallery (./node_modules/@mpxjs/webpack-plugin/lib/extractor.js?type=templa
te&index=0!./node_modules/@mpxjs/webpack-plugin/lib/wxml/wxml-loader.js?root=!./node_modules/@mpxjs/webpack-plugin/lib/template-compiler?{"usingComponents":["van-tabbar","van-tabbar-item"],"hasScoped":false,"hasComment":false,"isNative
":true,"moduleId":"5f0bf755"}!./node_modules/weui-miniprogram/miniprogram_dist/gallery/gallery.wxml?__resource=D:/personal/mpx/node_modules/weui-miniprogram/miniprogram_dist/gallery/gallery)
Module build failed (from ./node_modules/@mpxjs/webpack-plugin/lib/template-compiler/index.js):
SyntaxError: Unexpected token )
at new Function ()
at evalExp (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:1264:14)
at postProcessIf (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:1279:14)
at closeElement (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:1570:3)
at Object.end (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:740:9)
at parseEndTag (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:463:19)
at parseHTML (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:273:11)
at Object.parse (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\compiler.js:665:3)
at Object.module.exports (D:\personal\mpx\node_modules@mpxjs\webpack-plugin\lib\template-compiler\index.js:23:25)
@ ./node_modules/weui-miniprogram/miniprogram_dist/gallery/gallery.js (./node_modules/@mpxjs/webpack-plugin/lib/native-loader.js?{"transRpx":{"mode":"only","comment":"use rpx","include":"D://personal//mpx//src"}}!./node_modules/weui-m
iniprogram/miniprogram_dist/gallery/gallery.js) 9:0-451
`
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@tencent%2ftslint-config-wxapp - Not found
npm ERR! 404
npm ERR! 404 '@tencent/[email protected]' 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 'weui-miniprogram'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
场景:用户修改资料页面,之前上传的图片数据传给uploader渲染后,再次上传的时候报错
(err TypeError: Cannot set property 'url' of undefined)
发现问题:在uploader源码里有段这样的代码:
if (json.urls) {
var oldFiles = _this.data.files;
json.urls.forEach(function (url, index) {
oldFiles[len + index].url = url;
oldFiles[len + index].loading = false;
});
_this.setData({
files: oldFiles,
currentFiles: newFiles
});
_this.triggerEvent('success', json, {});
}
json.urls应该就选择上传的图片路径数组,json.urls写了遍历,url应该是一个对象,而oldFiles[len + index].url的赋值应该是个图片路径字符串,这里赋值了url会发生报错
解决:
oldFiles[len + index].url = url;
改成:oldFiles[len + index]= url;
按照 README.md 执行完 npm install
之后,运行 npm run dev
报错。
[09:05:49] 'weui-miniprogram-component-wxml' errored after 248 ms
[09:05:49] Error: File not found with singular glob: /Users/dkvirus/Documents/github/weui-miniprogram/src/weui-wxss/dist/style/weui.wxss (if this was purposeful, use `allowEmpty` option)
at Glob.<anonymous> (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob-stream/readable.js:84:17)
at Object.onceWrapper (events.js:273:13)
at Glob.emit (events.js:182:13)
at Glob.EventEmitter.emit (domain.js:441:20)
at Glob._finish (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:197:8)
at done (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:182:14)
at Glob._processSimple2 (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:688:12)
at /Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:676:10
at Glob._stat2 (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:772:12)
at lstatcb_ (/Users/dkvirus/Documents/github/weui-miniprogram/node_modules/glob/glob.js:764:12)
[09:05:49] 'weui-miniprogram-build' errored after 343 ms
[09:05:49] 'weui-miniprogram-dev' errored after 343 ms
[09:05:49] 'dev' errored after 346 ms
[09:05:49] The following tasks did not complete: weui-miniprogram-component-less, weui-miniprogram-component-json
[09:05:49] Did you forget to signal async completion?
看问题找到了 src/weui-wxss
目录,貌似该目录下没有 dist 目录导致的。
期望:官方生成 dist 目录,使得 npm run dev
能正常启动项目,用户体验友好。
extClass: {
type: Boolean,
value: ''
}
应该是 String 才对
README.md 中文档链接为空
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.