创建app端demo

项目依赖环境&＃xff08;需提前安装好&＃xff09;&＃xff1a;

1. Nodejs已安装
2. Cnpm、Nrm、Webpack
3. Weex Toolkit
4. WebStorm
5. Weex Playground
6. AndroidStudio
7. Vue-cli

创建工程
  进入项目存放路径

  输入weex create webpack leadnews-app命令
  选择设置项目信息

出现此信息说明项目创建成功。

导入项目&＃xff0c;设置编码utf-8

安装less  输入命令cnpm -i --save-dev less less-loader

配置LESS

在vue-loader.conf.js中配置刚安装的less加载器。

,lang: {less : ["less-loader"]}

修改package.json文件

{"name": "leadnews-app","version": "1.0.0","description": "leadnews-app端","author": "","private": true,"scripts": {"start": "npm run serve","build": "webpack --env.NODE_ENV&＃61;common","build:prod": "webpack --env.NODE_ENV&＃61;production","build:prod:web": "webpack --env.NODE_ENV&＃61;release","build:plugin": "webpack --env.NODE_ENV&＃61;plugin","clean:web": "rimraf ./release/web","clean:ios": "rimraf ./release/ios","clean:android": "rimraf ./release/android","dev": "webpack --env.NODE_ENV&＃61;common --progress --watch","unit": "karma start test/unit/karma.conf.js --single-run","test": "npm run unit","serve": "webpack-dev-server --env.NODE_ENV&＃61;development --progress","ios": "weex run ios","web": "npm run serve","android": "weex run android","pack:ios": "npm run clean:ios && weex build ios","pack:android": "npm run clean:android && weex build android","pack:web": "npm run clean:web && npm run build:prod:web"},"keywords": ["weex"],"license": "MIT","dependencies": {"phantom-limb": "0.0.1","vue": "^2.5.11","vue-router": "^3.0.1","weex-ui": "^0.6.14","weex-vue-render": "^1.0.17"},"devDependencies": {"autoprefixer": "^8.0.0","babel-core": "^6.26.0","babel-loader": "^7.1.1","babel-preset-stage-0": "^6.24.1","chai": "^4.1.2","css-loader": "^0.28.8","extract-text-webpack-plugin": "^3.0.2","friendly-errors-webpack-plugin": "^1.6.1","fs-extra": "^5.0.0","glob": "^7.1.2","html-webpack-plugin": "^2.30.1","html-webpack-plugin-for-multihtml": "^2.30.2","ip": "^1.1.5","karma": "^1.7.1","karma-coverage": "^1.1.1","karma-mocha": "^1.3.0","karma-phantomjs-launcher": "^1.0.4","karma-phantomjs-shim": "^1.5.0","karma-sinon-chai": "^1.3.3","karma-sourcemap-loader": "^0.3.7","karma-spec-reporter": "0.0.31","karma-webpack": "^2.0.6","less": "^3.9.0","less-loader": "^5.0.0","mocha": "^5.2.0","node-notifier": "^5.1.2","portfinder": "^1.0.13","postcss-import": "^11.0.0","postcss-loader": "^2.0.9","postcss-plugin-weex": "^0.1.6","raw-loader": "^0.5.1","rimraf": "^2.6.2","script-ext-html-webpack-plugin": "^1.8.5","sinon": "^4.1.3","sinon-chai": "^2.14.0","vue-loader": "^12.2.0","vue-style-loader": "^3.0.3","vue-template-compiler": "^2.5.11","vuex": "^3.1.1","vuex-router-sync": "^5.0.0","webpack": "^3.10.0","webpack-dev-server": "^2.9.7","webpack-merge": "^4.1.0","webpack-uglify-parallel": "^0.1.4","weex-loader": "^0.7.2","weex-vue-precompiler": "^0.1.17","ws": "^1.1.0"}
}


在命令行执行cnpm –i进行依赖安装。

1、weex-ui 是官方提供一套UI跨平台UI库&＃xff0c;https://alibaba.github.io/weex-ui

在源码路径src下建文件夹如图所示建文件夹后的源码路径

1. apis &＃xff1a;按页面存放各个页面的api文件
2. common &＃xff1a;存放公共配置和api
3. compoents &＃xff1a;存放公用组件
4. langs &＃xff1a;存放国际化语言包
5. mock &＃xff1a;存放单元测试数据
6. pages &＃xff1a;存放页面源码
7. routers &＃xff1a;存放路由配置源码
8. stores : 存放本地缓存源码
9. styles &＃xff1a;存放样式源码
10. utils &＃xff1a;存放通用工具类

Fontawesome介绍

Fontawesome是一套开源的图标字体库。由于字体图标渲染速度快于图片&＃xff0c;下面演示Fontawesome的使用。

在项目utils下新建font.js文件&＃xff0c;内容为&＃xff1a;

let utilFunc &＃61; {initIconFont () {let domModule &＃61; weex.requireModule(&＃39;dom&＃39;);domModule.addRule(&＃39;fontFace&＃39;, {&＃39;fontFamily&＃39;: "fontawesome",&＃39;src&＃39;: "url(&＃39;https://cdn.bootcss.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v&＃61;4.7.0&＃39;)"});}
};export default utilFunc;


引入Fontawesome

在index.vue文件created钩子方法中&＃xff0c;调用initIconFont方法&＃xff1a;

import util from "&＃64;/utils/font"

export default {   name: &＃39;leadnews-App&＃39;,   created () {     util.initIconFont();   } }

​​​​​​​使用Fontawesome

 class&＃61;"icon middle-icon">   

​​​​​​​语言封装

语言包的封装主要用于支持页面上静态内容的国际化支持。动态交互中的提示信息国际化将交由后端处理。

​​​​​​​中文包

在langs目录下增加zh.js&＃xff0c;存储中文语言包。

lang.js

import zh from "./zh"const lang &＃61; zhexport default lang

zh.js

const lang &＃61; {load_new_text:&＃39;正在与火星通信......&＃39;,load_more_text:&＃39;正在加载更多......&＃39;
}
export default lang


项目默认使用zh语言包

​​​​​​​全局设置

在entry.js文件中导入并设置为全局变量&＃xff1a;

1. import lang from &＃39;&＃64;/langs/lang&＃39;  
2. Vue.prototype.$lang &＃61; lang  

使用示例&＃xff1a;

this.$lang.load_new_text 

​​​​​​​路由封装

在routers文件下新增index.js文件

import Home from &＃39;./home&＃39;let routes &＃61; []let concat &＃61; (router) &＃61;> {routes &＃61; routes.concat(router)
}
// 合并‘主页’相关路由
routes &＃61; routes.concat(Home)export default routes;

1. 在src/router.js文件中导入路由&＃xff1a;

/*global Vue*/
import Router from &＃39;vue-router&＃39;
import routes from &＃39;&＃64;/routers/index&＃39;Vue.use(Router)export const router &＃61; new Router({routes:routes
});

​​​​​​​导航封装

创建文件src\utils\navigator.js

function Navigator(){this.navigator &＃61; []this.count &＃61; 0this.max &＃61; 9this.temp&＃61;{}
}
Navigator.prototype&＃61; {push : function(to,form,next) {if (this.temp[&＃39;path&＃39;] !&＃61; to[&＃39;path&＃39;]) {this.navigator[this.count] &＃61; formthis.count&＃43;&＃43;;if (this.count > this.max) this.count &＃61; 0;}else{this.temp&＃61;{}}next()},back : function(){this.count&＃61;this.count-1;if(this.count<0)this.count&＃61;this.max;this.temp&＃61;this.navigator[this.count]return this.temp}
}export default new Navigator();


并在src/router.js中增加以下代码&＃xff0c;注册导航器生效

// 注册导航器属性  
router.$navigator &＃61; navigator
// 注册返回方法  
router.back &＃61; function(){let to &＃61; this.$navigator.back()if(to){this.push(to)}}
// 路由之前记录路由处理  
router.beforeResolve((to, from, next) &＃61;> {router.$navigator.push(to, from, next)}) 

​​​​​​​Reqeust封装

Request的封装主要为项目提供网络支持。

​​​​​​​request开发

在common文件中增加request.js

var querystring&＃61;require("querystring");
function Request() {var stream;
}
Request.prototype&＃61;{__check : function(){if(!this.stream){this.stream &＃61; weex.requireModule("stream");}return this.stream;},post : function(path,body){let stream &＃61; this.__check();return new Promise((resolve, reject) &＃61;> {stream.fetch({method: &＃39;POST&＃39;,url: path,type: &＃39;json&＃39;,headers: {&＃39;Content-Type&＃39;: &＃39;application/json; charset&＃61;UTF-8&＃39;},body:body}, (response) &＃61;> {if (response.status &＃61;&＃61; 200) {resolve(response.data)}else {reject(response)}}, () &＃61;> {})})},get : function(path,parms){let stream &＃61; this.__check();if(parms){let tmp &＃61; querystring.stringify(parms)if(path.indexOf("?")&＃61;&＃61;-1){tmp&＃61;"?"&＃43;tmp;}else{tmp&＃61;"&"&＃43;tmp;}path&＃43;&＃61;tmp;}return new Promise((resolve, reject) &＃61;> {stream.fetch({method: &＃39;GET&＃39;,url: path,type: &＃39;json&＃39;}, (response) &＃61;> {if (response.status &＃61;&＃61; 200) {resolve(response.data)}else {reject(response)}}, () &＃61;> {})})}
}
export default new Request()


​​​​​​​全局设置

在entry.js文件中把reuqest作为全局设置&＃xff1a;

import request from &＃39;&＃64;/common/request&＃39;  

Vue.prototype.$request &＃61; request

​​​​​​​配置封装

1. 配置开发

在common文件中增加config.js

const config &＃61; {urls:{baseUrl:&＃39;/toutiao&＃39;,load:&＃39;api/v1/article/load&＃39;,loadmore:&＃39;api/v1/article/loadmore&＃39;,loadnew:&＃39;api/v1/article/loadnew&＃39;,show_behavior:&＃39;save_behavior&＃39;,// 解决多平台问题getBase : function(){if(weex.config.env.platform&＃61;&＃61;&＃39;Web&＃39;){return config.urls.baseUrl;}else{return "http://m.toutiao.com"}},get:function(name){let tmp &＃61; config.urls[name];if(tmp)return config.urls.getBase()&＃43;"/"&＃43;tmp;elsereturn config.urls.getBase()&＃43;"/"&＃43;name;}},style:{main_bg:&＃39;#3296fa&＃39;}}
export default config


​​​​​​​全局设置

在entry.js文件中把apis作为全局设置&＃xff1a;

import conf from &＃39;&＃64;/common/conf&＃39;  

Vue.prototype.$config &＃61; conf  

​​​​​​​存储开发

在stores文件中增加store.js

function Cache(){this.storage&＃61;null;this.tokenKey &＃61; "TOKEN_KEY"this.equipmentidKey &＃61; "EQUIPMENTID_KEY"
}
Cache.prototype&＃61;{setToken : function(token){return this.__setItem(this.tokenKey,token);},getToken : function(){return this.__getItem(this.tokenKey);},setEquipmentId : function(equipmentId){return this.__setItem(this.equipmentidKey,equipmentId);},getEquipmentId : function(){return this.__getItem(this.equipmentidKey);},clearToken : function(){return this.__removeItem(this.tokenKey);},__check : function(){if(this.storage&＃61;&＃61;null){this.storage &＃61; weex.requireModule("storage");this.setEquipmentId("8D3E8E0CF883C4E99329AF8A29300AB6")}return this.storage;},__setItem : function(key,value){let storage &＃61; this.__check();return new Promise((resolve, reject)&＃61;>{storage.setItem(key, value, function(e){if(e.result&＃61;&＃61;&＃39;success&＃39;){resolve(true)}else{reject(false)}});});},__getItem : function(key){let storage &＃61; this.__check();return new Promise((resolve, reject)&＃61;>{storage.getItem(key, function(e){if(e.result&＃61;&＃61;&＃39;success&＃39;){resolve(e.data)}else{reject(e)}});});},__removeItem : function(key){let storage &＃61; this.__check();return new Promise((resolve, reject)&＃61;>{storage.removeItem(key, function(e){if(e.result&＃61;&＃61;&＃39;success&＃39;){resolve(true)}else{reject(false)}});});}
}
const che &＃61; new Cache();
export default che


​​​​​​​全局设置

在entry.js文件中把apis作为全局设置&＃xff1a;

import store from &＃39;&＃64;/stores/store&＃39;  

Vue.prototype.$store &＃61; store

启动项目