weex入門到掌握

阿新 • • 發佈：2019-01-03

http://localhost:8081/index.android.bundle?platform=android
                                                           1.環境配置
1.下載安裝node
   檢驗安裝成功：
       node -v
2.在cmd中安裝npm
   檢驗安裝成功：
       npm -v
3.下載git並安裝
   檢驗安裝成功：git -v
4.在cmd中安裝webpack:安裝命令：npm install webpack -g
   檢驗安裝成功：webpack -v

2.建立weex專案
1.使用命令weex -v先檢查是否安裝了weex
2.使用命令weex create firstWeexDemo（firstWeexDemo是工程名，自定義）注意的是：在接下來建立工程名時不要出現大寫字母，否則會建立失敗
3.建立完成之後，使用命令 npm install安裝npm解析器
4.安裝完成之後先cd到建立完成的工程目錄在使用命令weex platform add android將建立的工程加入android專案平臺
5.開啟androidStudio->選擇開啟一個已經存在的工程->選擇platform下的andriod目錄匯入
6.匯入完成之後，新增虛擬裝置，create virtual device 建立對應的螢幕尺寸等

                                                           3.weex常用命令和熱更新
1.先將建立好的工程拉入vscode
2.開啟package.json，進入cmd 先cd到建立的目錄之下，使用命令npm run dev命令執行專案檔案
3.在開啟一個終端，輸入npm run serve,如果配置沒有問題就會自己跳轉到瀏覽器介面
4.weex支援熱更新，所以在src/index.vue中改變，但是頁面並不會隨之改變
5.在開啟一個終端，使用webpack進行打包，打完包之後就可以隨時進行熱更新了注：如果之前沒有安裝webpack，還需要根據提示安裝webpack-cli腳手架
       注：每次更改完成之後，都要記得使用webpack打包到dist目錄下（每次會自動打包到dist目錄下），才能實現實時的頁面更新
       但是新增監控之後，只要重新整理介面就會起到更新作用：
       監控設定：在package.json檔案中build改為這種： "build": "webpack --env.NODE_ENV=common",





                                                           4.Android Studio 開發設定以及weex init建立一個前端使用的weex專案
1.每次啟動之前應該先開啟兩個服務：一個是npm run build(用於開啟打包的監控服務)
                                       npm run serve(用於在瀏覽器介面執行專案)
2.實時預覽的瀏覽地址：http://192.168.239.1:8082/webpack-dev-server/web/
3.先在vscode中將dist目錄下的index.js的內容copy到androidStudio中的app目錄下的assets下的index.js中（注：如果有兩個index.js，那就全部都copy）
4.更改應用圖示：在androidStudio中，res/mipmap下就存放著圖示
5.打包生成apk檔案，build->Build Bundles/apk->bulid apk
   如果打包成功，就會出現打包成功的提示，如果失敗，就按照提示進行修改
6.weex init 建立的project主要用於前端人員的開發
weex create 建立的專案主要用於專門開發架構的人員進行開發
7.先切換到建立工程對應的目錄，使用weex init projectName建立一個工程
8.建立完成之後，cd到新建立的工程目錄，在進行npm install
9.把建立的專案使用vscode開啟
10.使用指令 npm run serve開啟對應的專案頁面

                                                           5.weex和vue之間的聯絡
weex與vue之間的不同：
   1.佈局不同：在html或者Vue中我們可以使用浮動佈局，但是weex並不支援，所以請不要使用。
   2.不支援百分數：html中佈局，經常使用百分比進行佈局，這種佈局可以適應不同螢幕，但是你用weex佈局時百分比是不支援的。
   3.不支援綜合寫法：比如html中支援border:1px solid red;但是weex就不支援
   4.weex的畫素只支援px,不支援em rem pt

6.自定義元件和Text元件
1.在src目錄下先建立一個vue，裡面用於寫你自定義的內容
   自定義的vue內容：
       
<template>

<div class="topHeader">

<text class="top_text">你好，weex</text>
</div>
</template>

<script>
export default {

}
</script>

<style scoped>
.topHeader{
background-color: red;
padding: 10px;

}
.top_text{
color: #fff;
font-size: 46px;
text-align: center;
lines:1;
}

</style>
   在顯示的主頁面(index.vue)引用：
       在<script></script>中進行引用：import topHeader from './topHeader.vue';
       在<script></script>中定義一個components，並且進行宣告：
           components:{
topHeader
}
   定義完成之後就可以直接在template中定義使用了
   下面講一下text元件：注：只有weex可以使用text元件：       詳情參考此網址：https://weex.apache.org/cn/references/components/text.html
   在css樣式中定義lines屬性:lines=n，那麼引用這個css樣式之後的text中的內容就以n行顯示注：lines只能在css樣式中定義





                                                           7.Input元件和初識內建模組
1.注意點一：
   我們在weex中<input />標籤必須寫成閉合形式,如果不閉合在手機或者模擬器中是渲染不出來的，會一直顯示載入。
2.使用init建立的工程打包方式：
   使用命令：npm run build會在dist目錄下生成兩個檔案：生成的兩個檔名字會在最後提示，將index.web.js中的檔案打開復制貼上到androidStudio開啟
   的檔案assets/index.js檔案中（注意是直接複製替換）
下面講一下內建模組：
   在主頁面index.vue的<script>部分宣告對內建模組的定義：
       var modal=weex.requireModule("modal");//引數必須是model
   接下來定義內建模組的宣告週期:
       created(){
modal.toast({
message:'頁面初始化成功',//用於提醒的欄位
duration:3//內建模組持續的秒數
});
}





                                                           8.Image和video元件
1.image元件及其對應的屬性：
   <template></template>內容：
   
<image class="testImage" resize="cover"
src="data:image/jpeg;base64,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"></image>
   對應的<script></script>內容：無；
   對應的<style></style>內容：
   .testImage{
/*
720px=100%
1250px=100%
*/
width:720px;
height:300px;
}
   注：image是weex獨有的屬性
2.video元件：
   <template></template>內容：
       <video class="video" :src="src" autoplay controls
v-on:start="onstart" v-on:pause="onpause" v-on:finish="onfinish" v-on:fail="onfail"></video>
   <script></script>中的內容：
export default {
name: 'App',
data () {
return {
   src:'https://www.youtube.com/watch?v=wn12uL6pYIc'
}
},
methods:{
onstart (event) {
this.state = 'onstart'
},
onpause (event) {
this.state = 'onpause'
},
onfinish (event) {
this.state = 'onfinish'
},
onfail (event) {
this.state = 'onfinish'
}
}
   對應的<style></style>樣式：
       .video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
所有的程式碼：
   <template>
<div >
<text class="text">Hello Word</text>
<div>
<input type="text" placeholder="輸入姓名" class="textInput" :autofocus=true />
</div>

<image class="testImage" resize="cover"
src="data:image/jpeg;base64,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"></image>

<video class="video" :src="src" autoplay controls
v-on:start="onstart" v-on:pause="onpause" v-on:finish="onfinish" v-on:fail="onfail"></video>
</div>
</template>
<script>
import topHeader from './topHeader.vue';
var modal=weex.requireModule("modal");//引數必須是model
export default {
name: 'App',
data () {
return {
logo:
'data:image/jpeg;base64,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',
src:'https://www.youtube.com/watch?v=wn12uL6pYIc'
}
},
components:{
topHeader
},
created(){
modal.toast({
message:'頁面初始化成功',//用於提醒的欄位
duration:3//內建模組持續的秒數
});
},
methods:{
onstart (event) {
this.state = 'onstart'
},
onpause (event) {
this.state = 'onpause'
},
onfinish (event) {
this.state = 'onfinish'
},
onfail (event) {
this.state = 'onfinish'
}
}

}
</script>

9.製作列表
1.先看一下loadmore元件的功能程式碼：用於上拉載入
   <template>
<div >

<list v-on:loadmore="fetch" loadmoreoffset="10">
<cell v-for="rum in lists">

<div class="panel">
<text class="text">{{rum}}</text>
</div>
</cell>
</list>
</div>
</template>
<script>
//宣告一個內聯模組
var modal=weex.requireModule("modal");//引數必須是model
export default {

data () {
return {
lists:[1,2,3,4,5]
}
},
methods:{
//fetch(event)：用於檢測所有的事件
fetch(event){
/*使用內聯模組
duration:1 1:指的是1秒
*/
modal.toast({message:'loadmore',duration:1});
/*用於實現模擬下拉選單的功能
setTimeout方法解析：包含function delay code
（注：code 這是一個替代語法，你可以使用字串代替function ，在delay毫秒之後執行字串
(使用該語法是不推薦的, 原因和使用 eval()一樣，有安全風險)。）
function 是你想要在delay毫秒之後執行的函式(function這個單詞不一定要顯示出來，不寫function 直接寫函式體也行)
延遲的毫秒數 (一秒等於1000毫秒)，函式的呼叫會在該延遲之後發生。如果省略該引數，delay取預設值0。實際的延遲時間可能會比 delay 值長
*/
setTimeout(()=>{
const length = this.lists.length;
for(let i=length;i<length+4;i++){
//給陣列lists不停地新增新元素
this.lists.push(i+1);
}
},800);//此處的800指的是毫秒
}
}
}

</script>
<style scoped>
.panel{
width:600px;
height:250px;
margin-left:75px;
margin-top:35px;
margin-bottom:35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color:rgb(162,217,192);
background-color:rgba(162, 217, 192, 0.2)
}
.text{
font-size:50px;
text-align: center;
color:#41B883;
}
</style>
2.loading元件的使用：用於下拉載入的元件
   <loading>元件要使用<loading>元件你需要先去<list>元件上的loadmore和loadmoreoffset屬性，並在list中加入<loading>元件
   程式碼詳情：
       <template>
<div>
<list>
<cell v-for="rum in lists">
<div class="panel">
<text class="text">{{rum}}</text>
</div>
</cell>

<loading class="loading" v-on:loading="onloading" :display="showLoading">
<text class="indicator">Loading...</text>
</loading>
</list>
</div>
</template>
<script>
//宣告一個內聯模組
var modal=weex.requireModule("modal");//引數必須是model
export default {

data () {
return {
lists:[1,2,3,4,5]
}
},
methods:{
onloading(event) {
modal.toast({ message: 'loading', duration: 1 });
//用於設定loading是否顯示
this.showLoading = 'show';
setTimeout(() => {
const length = this.lists.length;
for (let i = length; i < length + 4; i++) {
this.lists.push(i + 1);
}
//每次載入完之後就讓loading消失，否則loading就會一直進行
this.showLoading = 'hide';
}, 1500)

}
}
}
</script>
<style scoped>
.panel{
width:600px;
height:250px;
margin-left:75px;
margin-top:35px;
margin-bottom:35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color:rgb(162,217,192);
background-color:rgba(162, 217, 192, 0.2)
}
.text{
font-size:50px;
text-align: center;
color:#41B883;
}
</style>
3.<refresh>元件
實際開發中還需要重新整理頁面，weex在列表中也為我們想好了，提供了 <refresh>元件，它的作用就是在上拉時進行重新整理頁面
<template>
<div>

<refresh class="refresh" v-on:refresh="onrefresh" v-on:pullingdown="onpullingdown" :display="refreshing">
<text class="indicator">Refreshing ...</text>
</refresh>
<list>
<cell v-for="rum in lists">
<div class="panel">
<text class="text">{{rum}}</text>
</div>
</cell>

<loading class="loading" v-on:loading="onloading" :display="showLoading">
<text class="indicator">Loading...</text>
</loading>
</list>
</div>
</template>
<script>
//宣告一個內聯模組
var modal = weex.requireModule("modal"); //引數必須是model
export default {
data() {
return {
lists: [1, 2, 3, 4, 5],
showLoading: "hide",
refreshing: "hide"
};
},
methods: {
//下拉載入
onloading(event) {
modal.toast({ message: "loading", duration: 1 });
//用於設定loading是否顯示
this.showLoading = "show";
setTimeout(() => {
const length = this.lists.length;
for (let i = length; i < length + 4; i++) {
this.lists.push(i + 1);
}
//每次載入完之後就讓loading消失，否則loading就會一直進行
this.showLoading = "hide";
}, 1500);
},
onrefresh(event) {
modal.toast({ message: "refresh", duration: 1 });
this.refreshing = "show";
setTimeout(() => {
this.lists = [1, 2, 3, 4, 5];
this.refreshing = "hide";
}, 2000);
},
onpullingdown(event) {
modal.toast({ message: "pulling down", duration: 1 });
}
}
};
</script>
<style scoped>
.panel {
width: 600px;
height: 250px;
margin-left: 75px;
margin-top: 35px;
margin-bottom: 35px;
flex-direction: column;
justify-content: center;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 50px;
text-align: center;
color: #41b883;
}
</style>

                                                           10.從後端伺服器上獲取資料
1.stream的引入
要想使用stream，必須使用weex來進行引入。
stream.fetch(options, callback[,progressCallback]):
   options {Object}：請求的一些選項包含：
                                           method {string}：HTTP 方法 GET 或是 POST
                                           url {string}：請求的 URL
                                           headers {Object}：HTTP 請求頭
                                           type {string}：響應型別, json,text 或是 jsonp {在原生實現中其實與 json 相同)
                                           body {string}：HTTP 請求體。
   注意：
       body 引數僅支援 string 型別的引數，請勿直接傳遞 JSON，必須先將其轉為字串。
       GET 請求不支援 body 方式傳遞引數，請使用 url 傳參。
   callback：回撥函式

   測試程式碼：
<template>
<div>
<list>
<cell v-for="news in lists">
<div class="panel">
<text class="text">{{news.newsTitle}}</text>
<text class="content">{{news.newsContent}}</text>
<text class="content">{{news}}</text>
</div>
<div class="panel">
<text class="title">method = GET</text>
<text class="count">{{getResult}}</text>
</div>
</cell>
</list>
</div>
</template>
<script>
const modal = weex.requireModule('modal');
//要想使用stream，必須使用weex來進行引入stream模組。stream主要是用於接收json字串
const stream = weex.requireModule('stream');
export default {
data() {
return {
lists: [],
}
},
/*鉤子函式------在元件例項化完成之後就會執行這個函式，但是頁面還未顯示
元件例項化之前先請求json資料
*/
created(){
let url='http://jsfiddle.net/echo/jsonp/?callback=anything&result=content_in_response';
//呼叫getNews方法
this.getNews(url,res=>{
modal.toast({message:'請求成功',duration:1});
//把獲取的data資料賦值給lists
this.lists=res.data;
console.log("jsonData="+res.data);
});
},
methods: {
getNews(url,callback){
//此處是stream的fetch方法
return stream.fetch({
//使用get的方式請求
method:'GET',
//請求的資料是json格式
type:'json',
url:url
//callback是回撥函式，也就是請求之後呼叫的函式
},callback);
}
}
}
</script>

詳細的stream使用程式碼：
<template>
<scroller>
<div class="panel">
<text class="title">method = GET</text>
<text class="content">{{getResult}}</text>
</div>
<div class="panel">
<text class="title">method = GET / type = jsonp</text>
<text class="content">{{getJsonpResult}}</text>
</div>
<div class="panel">
<text class="title">method = POST</text>
<text class="content">{{postResult}}</text>
</div>
<div class="panel">
<text class="title">method = PUT</text>
<text class="content">{{putResult}}</text>
</div>
<div class="panel">
<text class="title">method = DELETE</text>
<text class="content">{{deleteResult}}</text>
</div>
<div class="panel">
<text class="title">method = HEAD</text>
<text class="content">{{headResult}}</text>
</div>
<div class="panel">
<text class="title">method = PATCH</text>
<text class="content">{{patchResult}}</text>
</div>
</scroller>
</template>

stream.fetch({
method: 'GET',
url: GET_URL_JSONP,
type:'jsonp'
}, function(ret) {
if(!ret.ok){
me.getJsonpResult = "request failed";
}else{
console.log('get:'+ret);
me.getJsonpResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get jsonp in progress:'+response.length);
me.getJsonpResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'GET',
url: GET_URL,
type:'json'
}, function(ret) {
if(!ret.ok){
me.getResult = "request failed";
}else{
console.log('get:'+ret);
me.getResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get in progress:'+response.length);
me.getResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'POST',
url: POST_URL,
type:'json'
}, function(ret) {
if(!ret.ok){
me.postResult = "request failed";
}else{
console.log('get:'+JSON.stringify(ret));
me.postResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get in progress:'+response.length);
me.postResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'PUT',
url: PUT_URL,
type:'json'
}, function(ret) {
if(!ret.ok){
me.putResult = "request failed";
}else{
console.log('get:'+JSON.stringify(ret));
me.putResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get in progress:'+response.length);
me.putResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'DELETE',
url: DELETE_URL,
type:'json'
}, function(ret) {

if(!ret.ok){
me.deleteResult = "request failed";
}else{
console.log('get:'+JSON.stringify(ret));
me.deleteResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get in progress:'+response.length);
me.deleteResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'HEAD',
url: HEAD_URL,
type:'json'
}, function(ret) {
if(ret.statusText !== 'I\'m a teapot'){
me.headResult = "request failed";
}else{
console.log('get:'+JSON.stringify(ret));
me.headResult = ret.statusText;
}
},function(response){
console.log('get in progress:'+response.length);
me.headResult = "bytes received:"+response.length;
});

stream.fetch({
method: 'PATCH',
url: PATCH_URL,
type:'json'
}, function(ret) {
if(!ret.ok){
me.patchResult = "request failed";
}else{
console.log('get:'+JSON.stringify(ret));
me.patchResult = JSON.stringify(ret.data);
}
},function(response){
console.log('get in progress:'+response.length);
me.patchResult = "bytes received:"+response.length;
});
}
};
</script>

11.作輪播圖片效果
<template>
<div>

<slider class="slider" interval="3000" auto-play="true" infinite="true">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>

<indicator class="indicator"></indicator>
</slider>
</div>
</template>

12.a元件和web元件
使用<a>元件時需要和我們html中的<a>標籤區分，html中的<a>標籤是用來連結html頁面的，而weex中的<a>元件是用來連結weex格式的js檔案的
判斷是否可以訪問到你所建立的檔案：
   先cd到建立的目錄之下，使用命令ipconfig檢視ipv4的地址
   比如我的是192.168.239.1
   後面新增埠號8080或者8081等。
   訪問地址http://192.168.239.1:8081/slider.js（slider.js就是你要判斷是否可以訪問的檔案）
   如果可以訪問那麼就會顯示這個檔案裡面的內容，如果未顯示，說明不能進行訪問
   index.vue中的主要程式碼如下：
       <template>
<div class="wrapper">

<a class="button" href="http://192.168.239.1:8081/slider.js">
<text class="text">跳轉輪播圖</text>
</a>
</div>
</template>
下面講一下web元件   在原生的軟體中嵌入網站頁面
<template>
<div class="wrapper">

<web src="https://www.baidu.com/" class="web" v-on:pagestart="start" v-on:pagefinish="finish" v-on:error="error"></web>
</div>
</template>
<script>
/*使用宣告週期----鉤子函式
先定義一個modal
*/
const modal = weex.requireModule("modal");
export default {
data() {
return {};
},
methods: {
start() {
modal.toast({
message: "頁面開始呼叫", //用於提醒的欄位
duration: 3 //內建模組持續的秒數
});
},
finish() {
modal.toast({
message: "頁面結束呼叫", //用於提醒的欄位
duration: 3 //內建模組持續的秒數
});
},
error() {
modal.toast({
message: "頁面呼叫錯誤", //用於提醒的欄位
duration: 3 //內建模組持續的秒數
});
}
}
};
</script>
<style scoped>
.wrapper {
flex-direction: column;
justify-content: center;
}
.web {
margin-left: 75px;
width: 600px;
height: 750px;
border-width: 2px;
border-style: solid;
border-color: #41b883;
}
</style>

13.通用事件和動畫模組
1.先描述一些常見的事件：
   <1>longpress(長按事件):如果一個元件被綁定了 longpress 事件，那麼當用戶長按這個元件時，該事件將會被觸發。
   <2>Appear（螢幕內事件）：如果一個位於某個可滾動區域內的元件被綁定了 appear 事件，那麼當這個元件的狀態變為在螢幕上可見時，
       該事件將被觸發。
   <3>Disappear（螢幕外事件）:如果一個位於某個可滾動區域內的元件被綁定了 disappear 事件，
       那麼當這個元件被滑出螢幕變為不可見狀態時，該事件將被觸發。
2.動畫效果：
   <template>
<div class="wrapper">

<div ref="test" v-on:click="move" class="box"></div>
</div>
</template>

weex入門到掌握

weex入門到掌握

WEEX入門指南

Weex入門教程之5，debug除錯，整合 Devtools 到 Android

Weex入門教程之10，vue-router 路由

移動跨平臺Weex入門

Weex入門與進階指南

weex從入門到放棄

全面解讀JavaScript入門到進階，100%基礎知識掌握！

普通碼農入門機器學習，必須掌握這些數據技能

一、AssetBundle入門到掌握

Weex系列-入門2

[轉]遺傳算法入門到掌握

入門到精通的路上有哪些快速掌握Python的途徑？

基礎運維：SELINUX入門到掌握

基礎運維：iptables防火墻入門到掌握

Linux入門級需要掌握的命令

原大資料入門學習，你要掌握這些技能

原大數據入門學習，你要掌握這些技能

小白學習大資料掌握這幾個方法可輕鬆入門

入門大資料一定要掌握的知識點

weex入門到掌握

相關推薦