created by zhangwei zhenggl
新建Vue页面
一般的Vue页面，包含3个文件
index.js : 主启动页
main.vue：展示页面
store.js ：数据层
main.vue 页面
<template>
<div>
<text>helloworld</text>
</div>
</template>
<style>
</style>
<script>
module.exports = {
props:{
},
data:function(){
return {
}
},
components:{
},
computed:{
},
created:function(){},
methods:{
},
}
</script>index.js 页面
import store from './store'
import mainVue from './main.vue'
new Vue(Vue.util.extend({ el: '#root' ,store}, mainVue))
store.js页面
import Vuex from 'vuex'
// Vuex is auto installed on the web
if (WXEnvironment.platform !== 'Web') {
Vue.use(Vuex)
}
const stream = weex.requireModule("stream");
var store = new Vuex.Store({
state:{
count:100
},
getters:{
getOne:function(state){
}
},
mutations:{
alterData(state){
state.count = 10000;
}
},
actions:{
reqGetCategory(context){
var param = {
method: 'GET',
url: 'http://117.158.222.252:10371/drama/findType.action?id=0',
type: 'jsonp',
timeout:'3000'
};
stream.fetch(param,function(result){
if(!result.ok){
console.log("reqerror");
}else{
if(result.data == null
|| result.data == ""
|| result.data === undefined){
console.log("req data error");
return
}
var jsonData = JSON.stringify(result.data);
console.log("jsonData:" + jsonData);
context.commit('alterData')
}
})
},
reqGetCategoryCallback(context,callback){
var param = {
method: 'GET',
url: 'http://117.158.222.252:10371/drama/findType.action?id=0',
type: 'jsonp'
};
stream.fetch(param,function(result){
if(!result.ok){
console.log("reqerror");
callback("callbackfaild");
}else{
var jsonData = JSON.stringify(result.data);
console.log("jsonData:" + jsonData);
context.commit('alterData')
callback("callbackSuccess");
}
})
},
}
})
export default store配置webpack.config.js文件
在weexConfig的entry下添加需要编译的文件,下面的语法会把我们在test下的3个文件编译成一个helloworld.js文件，放到dist的debug目录下
const weexConfig = {
entry: {
'debug/helloworld':pathTo.resolve('src/test','index.js'),
},配置android环境
- 修改包名
修改app工程下的AndroidManifest.xml中的package 和build.gradle中的applicationId为自定义的包名com.brlf.helloworld,as会提示点击sync now，点击 切换目录到packages,会出现包名目录brlf.helloworld，然后把weex目录下的3个文件拖拽到hellowrold目录下
切换到android目录，然后删除alibaba.weex包目录
设置唯一的启动类,防止和其他weex框架共用
a. 把com.taobao.android.intent.category.WEEX换成你项目唯一的名称，比如com.brlf.helloworld.page
<activity
android:name=".WXPageActivity"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.VIEW"/>
<action android:name="com.alibaba.weex.protocol.openurl"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="com.taobao.android.intent.category.WEEX"/>
<data android:scheme="http"/>
<data android:scheme="https"/>
<data android:scheme="file"/>
</intent-filter>
</activity>
b. 修改app工程,SplashActivity启动类54行，替换掉com.taobao.android.intent.category.WEEX
Uri uri = Uri.parse(builder.toString());
intent.setData(uri);
intent.addCategory("com.taobao.android.intent.category.WEEX");
intent.setPackage(getPackageName());
startActivity(intent);
finish();
c.修改appframework package com.alibaba.weex.extend.module; 下面的WXEventModule的13行，替换com.taobao.android.intent.category.WEEX
private static final String WEEX_CATEGORY = "com.taobao.android.intent.category.WEEX";
修改加载为远程加载
找到app的资源目录下res/xml/app_config配置文件，修改参数
配置IOS环境
安装pod
命令行进入ios目录下，执行：pod install
安装完成后，双击WeexDemo.xcworkspace，即可调用XCode打开工程修改Bundle Identifier
Bundle Identifier修改为自己的包名根据需求修改资源配置文件
为了后续项目可复用，兼容本地bundlejs内自定义路径，结合config.xml文件，作以下修改（使用默认的也无妨）：a. WeexSDKManager.m文件，修改 + (void)setup 方法： + (void)setup; { NSURL *url = nil; //#if DEBUG //If you are debugging in device , please change the host to current IP of your computer. WeexBundleUrlLoder *loader = [WeexBundleUrlLoder new]; // isTest = [loader isTest]; // url = [loader jsBundleURL]; if (!url) { url = [NSURL URLWithString:BUNDLE_URL]; } //#else // url = [NSURL URLWithString:BUNDLE_URL]; //#endif #ifdef UITEST url = [NSURL URLWithString:UITEST_HOME_URL]; #endif [self initWeexSDK]; [WeexPluginManager registerWeexPlugin]; [self loadCustomContainWithScannerWithUrl:url]; } b. WeexBundleUrlLoder.m文件，重写 - (NSURL *)jsBundleURL 方法： - (NSURL *)jsBundleURL { if (!self.settings) { return nil; } NSURL *jsBundleUrl = nil; if (self.settings[@"launch_locally"] && [self.settings[@"launch_locally"] boolValue]) { NSString *jsFile = self.settings[@"local_url"]; if (jsFile && ![jsFile isEqualToString:@""]) { NSString *prefix = @"file://assets/dist/"; if (self.settings[@"local_prefix"] && ![self.settings[@"local_prefix"] isEqualToString:@""]) { prefix = self.settings[@"local_prefix"]; } if ([jsFile hasPrefix:prefix]) { jsFile = [jsFile substringFromIndex:prefix.length]; NSLog(@"jsFile=%@", jsFile); } jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/bundlejs/dist/%@",[NSBundle mainBundle].bundlePath,jsFile]]; }else { jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"file://%@/bundlejs/index.js",[NSBundle mainBundle].bundlePath]]; } }else { NSString *port = self.settings[@"port"]; if (port && ![port isEqualToString:@""]) { //有配置端口 } else { //无配置端口，使用默认8080端口 port = @"8080"; } NSString *hostAddress = self.settings[@"launch_url"]; if (hostAddress && ![hostAddress isEqualToString:@""]) { if ([hostAddress hasPrefix:@"http://"] || [hostAddress hasPrefix:@"https://"]) { jsBundleUrl = [NSURL URLWithString:hostAddress]; } else { NSString *startUrl = self.settings[@"online_start_url"]; if (startUrl && ![startUrl isEqualToString:@""]) { jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:%@/dist/%@", hostAddress, port, startUrl]]; } else { jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:%@/dist/index.js", hostAddress, port]]; } } }else { NSString *startUrl = self.settings[@"online_start_url"]; if (startUrl && ![startUrl isEqualToString:@""]) { jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:%@/dist/%@", [self getPackageHost], port, startUrl]]; } else { jsBundleUrl = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@:%@/dist/index.js", [self getPackageHost], port]]; } } } return jsBundleUrl; } c. config.xml文件，修改如下： <?xml version='1.0' encoding='utf-8'?> <widget id="com.taobao.WeexDemo" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://*"> <name>WeexDemo</name> <description> A sample Weex application that responds to the deviceready event. </description> <author email=" " href="https://alibaba.github.io/weex/"> Weex Team </author> <content src="index.html" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <preference name="AllowInlineMediaPlayback" value="false" /> <preference name="BackupWebStorage" value="cloud" /> <preference name="DisallowOverscroll" value="false" /> <preference name="EnableViewportScale" value="false" /> <preference name="KeyboardDisplayRequiresUserAction" value="true" /> <preference name="MediaPlaybackRequiresUserAction" value="false" /> <preference name="SuppressesIncrementalRendering" value="false" /> <preference name="SuppressesLongPressGesture" value="false" /> <preference name="Suppresses3DTouchGesture" value="false" /> <preference name="GapBetweenPages" value="0" /> <preference name="PageLength" value="0" /> <preference name="PaginationBreakingMode" value="page" /> <preference name="PaginationMode" value="unpaginated" /> <!--【重要】--> <!-- 测试模式开关：true显示测试输入地址页面; false正式上线的页面 --> <preference name="is_test" value="true" /> <!--///--> <!--【重要】--> <!-- 本地 或 在线资源 开关: true使用本地，false使用在线 --> <preference name="launch_locally" value="false" /> <!--///--> <!--【本地】--> <!-- launch_locally:true 使用本地bundlejs目录下的资源:local_url不为空，使用bundlejs/+local_url的地址；为空，使用bundlejs/index.js --> <preference name="local_url" value="business/login/auto_login.js" /> <preference name="local_prefix" value="file://assets/dist/" /> <!--///--> <!--【在线】--> <!-- launch_locally:false 使用在线的资源：launch_url不为空，使用launch_url的启动地址；launch_url为空，使用online_start_url:+port --> <!-- 公网地址 --> <!-- <preference name="launch_url" value="http://xxx/xxx/dist/business/login/auto_login.js"/>--> <!-- 本地内网地址 --> <preference name="launch_url" value="http://192.168.1.122:9200/dist/launch.js"/> <preference name="online_start_url" value="business/login/auto_login.js" /> <preference name="port" value="9200" /> <!--///--> <!-- 注意事项：by guoli 20170901 --> <!-- 正式上线的包，一定要检查该配置文件中以下字段的值：--> <!-- 1、关闭测试开关 --> <!--<preference name="is_test" value="false" />--> <!-- 2-1、若是在线资源 --> <!--<preference name="launch_locally" value="false" />--> <!--<preference name="launch_url" value="http://xxx/xxx/dist/business/login/signin.js"/>--> <!-- 2-2、若是本地资源 --> <!--<preference name="launch_locally" value="true" />--> <!--<preference name="local_url" value="business/login/signin.js" />--> <!-- 以上字段： --> <!-- 关闭测试开关：is_test 一定是 false --> <!-- 在线：launch_locally 一定是 false, 同时 launch_url 一定是公网启动地址 --> <!-- 本地：launch_locally 一定是 true, 同时 local_url 一定是本地bundlejs/dist/目录下启动地址相对路径 --> <!-- 总之，关闭测试开关，控制好：在线 或 本地资源，检查 launch_url 或 local_url 配置是否正确，即可。--> </widget>修改加载js模式：在线js文件模式、本地js文件模式
launch_locally 设为 true，即为使用本地js模式；false即为使用在线js模式；
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
