Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
weex-vue-render
Advanced tools
Readme
This is a group of Vue 2.x components for Weex, which have the same behavior with the Weex built-in components on the native.
It can be run on browser only based on Vue 2.x (without Weex).
If you prefer npm way, you should manually call init
function to pass Vue constructor to weex.
import Vue from 'vue'
import weex from 'weex-vue-render'
weex.init(Vue)
import App from 'App.vue'
new Vue(App)
If you perfer cdn way, and use script tag to import a script link, just import it into your html file, it will auto-init and you can just ignore it.
<script>{{Vue}}</script>
<script>{{weex-vue-render}}</script>
<script>{{your js bundle}}</script>
You can juse use a render-core in your page, and define your needs for the plugins (components and API modules) in your entry file, so that your would save a lot of bundle size and bandwidth. On the other hand, The full version contains all the built-in components and API modules, which will waste a lot of bundle size and bandwidth if you haven't use most of them.
To use the render-core and the plugins, just install the plugins in your entry file.
import Vue from 'vue'
// import render-core.
import weex from 'weex-vue-render/dist/index.core'
// import the plugins (components and modules) you want to use.
import slider from 'weex-vue-slider'
import stream from 'weex-vue-stream'
// init weex.
weex.init(Vue)
// install the plugins.
weex.install(slider)
weex.install(stream)
import App from 'App.vue'
new Vue(App)
These components have already integrated into render-core. You don't have to import and install them:
npm module name | component name |
---|---|
weex-vue-a | a |
weex-vue-input | input |
weex-vue-slider | slider / slider-neighbor |
weex-vue-switch | switch |
weex-vue-textarea | textarea |
weex-vue-video | video |
weex-vue-web | web |
npm module name | API module name |
---|---|
weex-vue-animation | animation |
weex-vue-clipboard | clipboard |
weex-vue-dom | dom |
weex-vue-event | event |
weex-vue-geolocation | geolocation |
weex-vue-global-event | globalEvent |
weex-vue-modal | modal |
weex-vue-nav | navigator |
weex-vue-storage | storage |
weex-vue-stream | stream |
weex-vue-websocket | websocket |
weex-vue-webview | webview |
Some of the above plugins may not be mentioned in weex documents. Just ignore them if you have no idear about what they are and how to use them.
You can develop more plugins for your app. Accordingly the same plugin for other two platforms (iOS and Android) should also be built and intergrated in your app if you want it run on all three platforms.
Use weex-vue-bundle-util
to scan you code, which will return a promise with a object to tell which components and modules you have used in your project, so that can generate a entry file accordingly to import those plugins.
https://github.com/weexteam/weex-vue-bundle-util
You can see the examples of weex built in this way by running the script npm run build:vue:examples
, and use the <script src="./dist/render.vue.js"></script>
as the render in the vue.html
file.
NOTE: you should inject $processStyle
to preprocess vnode's style in vue-loader's postTransformNode hook.
vue: {
/**
* important! should use postTransformNode to add $processStyle for
* inline style prefixing.
*/
compilerModules: [
{
postTransformNode: el => {
el.staticStyle = `$processStyle(${el.staticStyle})`
el.styleBinding = `$processStyle(${el.styleBinding})`
}
}
],
}
weex-vue-render/dist/index.core.js
.image.save
for <image>
component.modal.toast
on android.env.deviceHeight
after window's resizing.<a>
link, or it is a <a>
link and has a prevent
attribute on it.stream.fetch
for adding wrong suffix to the request url.<gif>
componentappear
and disappear
in scrollerappear
and disappear
in slidercomponent | dom element | children | note |
---|---|---|---|
scroller | /main | /main/div/x | - |
list | /main | /main/div/x | - |
cell | /sect | /sect/x | - |
header | /head | /head/x | - |
loading | /asid | /aside/x | - |
loading-indicator | /mark | /mark/x | - |
refresh | /asid | /aside/x | - |
slider | /nav | x -> /ul/li/x, indicator -> /nav/nav | - |
indicator | /nav | - | indicator points: /nav/mark |
a | /a | /a/x | - |
div | /div | /div/x | - |
image | /figure | - | - |
input | /input | - | - |
switch | /span | - | round button: /span/small |
text | /p | - | - |
textarea | /textarea | - | - |
video | /video | - | - |
web | /iframe | - | - |
FAQs
Web renderer for weex project written in Vue DSL.
The npm package weex-vue-render receives a total of 62 weekly downloads. As such, weex-vue-render popularity was classified as not popular.
We found that weex-vue-render demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.