preface

The leader wanted me to switch to a larger front-end. At that time, I was quite excited, because it was completely consistent with my initial positioning. However, after doing some back-end things, I found that I also had a feeling for the back-end, but to be honest, it was still superficial.

I think last weekend two days, found himself really have to be in the front end that continue to “shed their blood,” this is not only more diligence before have some knowledge, but also expand their standing in the field of slightly at a more stable, just recently is responsible for the development of products to “cross-platform” mode, need to do some research work in advance, With the recent changes of team members, the new student is willing to enter Weex cross-platform framework.

Of course, for me, I don’t like anything that isn’t Native at all, and I feel “weird” even using someone else’s library at the moment. Earlier this year, I tried to polish the two most popular cross-platform frameworks “Applet” and “React-Native”, but just starting from demo level, At that time, I was very disgusted with various cross-platform development frameworks, and there were always some indescribable “weirdness”, but it can not be said that they are not good at all. In the process of writing demo, I used many basic components immediately, which greatly improved the efficiency of Native development by more than one or two times.

After a week of short, bumpy learning, also this year to learn the third is also very popular cross-platform framework – Weex written demo, most of the ideas from Weex official documents and teaching videos. If you are interested, scan the QR code below to try it out:

Weex introduction

There are a lot of explanations about Weex on the Internet, which can be summarized as follows:

  • Weex is very cool to write, the premise is: no requirements for animation; There is no requirement for interaction; No performance requirements; The business logic is not complex.
  • If you’re a tech stackJavascriptIs subject and dependentVueExcluding the first one, Weex is hardly a mystery. After all, Weex is now considered to beVue-Native.
  • If your company has accumulated a lot of Native experience, Weex is almost certain to fail (just metaphorically 😄); On the other hand, if you are web-driven and want to cut into Native, consider whether React-Native fits into your technology stack after meeting the first requirement, and then consider Weex. Check this out by comparing RN with Weex’s official documentation and community. Of course Weex is still quite young, but it’s only been about a year since React-Native became open source.
  • As far as I know, at present “Geek Time”, “Penguin e-sports” and other apps have been pure Weex development, and even The Orange factory “Hitch Car” has been fully embraced, which shows how powerful it is!

knowledge

The main knowledge points used in this demo are as follows:

  • Weex built-in components:div.text
  • Weex built-in modules:navigator.storage.dom
  • Weex custom Component
  • CSSThe basic content
  • Vue.jsThe basic content
  • JavascriptThe basic content

The page display

index.html

add.html

detail.html

The development process

Weex absorbs the current most popular MVVM and component-oriented development ideas, which is where THE “cool” I said above came from! For example, the Navbar component, writing a component is really fast and cool compared to Native! Write the component template code in

, write the event handling, property definition, lifecycle management in

navbarcomponent

<template> <div class="navbar"> <! < div class="iconfont navbar-icon" @click="onBack">&#xe779; </text> <text v-else class="navbar-title"></text> <text class="navbar-title">{{ title }}</text> <text class="navbar-title"></text> </div> </template> <script> const navigator = weex.requireModule('navigator') export default { name: 'navbar', props: { showBack: { type: Boolean, default: true }, title: { type: String, required: true } }, beforeCreate () { const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': 'iconfont', 'src': "url('http://at.alicdn.com/t/font_933576_ji32n9fdyki.ttf')" }) }, methods: { onBack () { navigator.pop({ animated: 'true' }) } } } </script> <style scoped> .iconfont { font-family: iconfont; } .navbar { height: 88px; background-color: #50e3a4; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 20px; padding-right: 20px; } .navbar-title { font-size: 32px; color: #fff; } .navbar-icon { color: #fff; font-size: 36px; } </style>Copy the code

Relevant points to note

Install the Weex tool package

npm install weex-toolkit -g

Create a Weex project from scratch

weex create awesome-app

During project creation, key information such as author, whether vue-Router is used, ESLint, etc., will be prompted to wait.

Adding an iOS project

weex platform add ios

Build js bundle

weex run build

Get the corresponding JS bundle file in the dist folder.

Switch display

After executing NPM start in the factory directory, a “shell” page opens in the browser with many unwanted elements. If you don’t need them, you can do this:

  • Assuming that performnmp startAfter, the address opened is:http://172.20.10.4:8081/web/preview.html?page=index.js
  • Change the address to:http://172.20.10.4:8081/index.htmlThis removes unnecessary elements and makes the page clean

The new page

After the new page is added, if you directly enter the address through the browser to access 404, because the resource file built this time does not contain our new page, we need to re-execute NPM start to rebuild.

flex-direction

Determine the main orientation of your page layout, be it row or Column.

align-items

Determines the horizontal layout of the elements in the parent container, set to Center if you want to center them.

align-content

Determines the vertical layout of the elements in the parent container, set to Center if you want to center them.

justify-content

Determines how the elements in the parent container will be arranged along the main axis. If you want an equal layout, set it to space-around, and the left and right margins will be half the middle space.

align-items

Determine how elements are arranged on the intersecting axis

dist

JS bundles generated by webpack are stored in the dist folder.

In templates, Vue automatically converts camel-named components into short horizontal connections

Boolean

In Weex, bool values are essentially strings, such as “true”, which is “true”, which is “true”, which is “true”, which is “true”, which is “true”, which is “true”, which is not “true”.

Weex SDK

The js bundle can be directly dragged into the project. In iOS, you can see the rendered page hierarchy as follows:

If you look at WeexSDK, you can see that the native components are basically packaged in Weex supported formats, so it is impossible to add the cross-platform framework without increasing the size of the app. It just depends on what optimization method is used.

conclusion

I would like to introduce the Weex development process and some details of the system, next time have the opportunity to play again happy! This Weex demo practice, let myself Weex and Vue have an intuitive feeling, so far the most impressive to me is not Weex but Vue, a lot of feelings. The love of native development is much more, in today’s era, fast not stable, anyway, I am still a staunch native developer ~

PJ’s iOS development routine