IDE
Se recomienda VSCode.
instalar dependencias
Weex proporciona oficialmente la herramienta de andamiaje weex-cli para ayudar al desarrollo y la depuración.
Primero, necesita Node.js y Weex CLI.
Hay muchas formas de instalar Node.js La forma más fácil es descargar el programa ejecutable del sitio web oficial de Node.js e instalarlo directamente.
Para obtener más métodos de instalación, consulte la información oficial de Node.js
SUGERENCIA
Por lo general, el entorno Node.js está instalado y la herramienta de administración de paquetes npm también está instalada. Por lo tanto, use directamente npm para instalarweex-toolkit, también puede instalar a través de yarn.
Los desarrolladores nacionales recomiendan cambiar el espejo npm al espejo Taobao NPMhttps://registry.npm.taobao.org.
Ejecute el siguiente comando para instalar las últimas herramientas de la versión beta:
entorno OSX
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装weex工具包
$ weex -v // 查看当前weex工具版本
entorno de Windows
$ npm i -g weex-toolkit
$ weex -v // 查看当前weex工具版本
Después de la instalación, puede usar directamente weex helpel comando para verificar si la instalación fue exitosa, mostrará todas las instrucciones compatibles con weex y también puede weex doctorverificar su entorno de desarrollo local a través del comando.
Inicializar el proyecto
Luego inicialice el proyecto Weex:
$ weex create weex-demo
Después de ejecutar el comando, se generó una estructura de proyecto estándar para nosotros en el directorio weex-demo.
desarrollar
Ingrese la ruta donde se encuentra el proyecto. Si elige instalar automáticamente las dependencias al generar el proyecto, solo necesita ejecutar directamente después de ingresar el proyecto para ejecutarlo completamente. De lo contrario, npm startdebe ejecutarlo en el proyecto con anticipación para npm installinstalar las dependencias requeridas por el proyecto.
npm startDespués de ejecutarse, la herramienta iniciará un servicio web local y escuchará 8081el puerto. Puede abrir http://localhost:8081para ver el efecto de representación de la página en la Web. El código fuente está en src/el directorio, puede desarrollarlo como un proyecto Vue.js normal
.
compilar y ejecutar
De forma predeterminada, weex createel comando no inicializa los proyectos de iOS y Android, puede weex platform addagregar proyectos de plataforma específicos ejecutando .
weex platform add ios
weex platform add android
Debido a los diferentes entornos de red, el proceso de instalación puede llevar algún tiempo, tenga paciencia. Si la instalación falla, asegúrese de que su entorno de red sea fluido.
Para abrir proyectos de Android e iOS en la máquina local, debe configurar el entorno de desarrollo del cliente. Para iOS, debe tener Xcode instalado y configurado. Para Android, debe tener Android Studio instalado y configurado. Cuando el entorno de desarrollo esté listo, ejecute el siguiente comando para iniciar la aplicación en el emulador o dispositivo real:
weex run ios
weex run android
weex run web
Sugerencias:
Se recomienda elegir JDK al configurar el entorno AndroidJDK8. El entorno JDK en mi propia computadora es el predeterminadoJDK14. Como resultado, se informa un error al compilar y es normal cambiar a JDK8.
excepción de compilación
weex run iosNo se pudo ejecutar: no
se pudieron ubicar los 'instrumentos'
xcrun: error: no se pudieron encontrar los "instrumentos" de la utilidad, no es una herramienta de desarrollador o en PATH
La falla al ejecutar la línea de comando puede ser un problema con la herramienta de empaquetado weex weex-toolkit, y la versión oficial no ha sido lanzada. Probemos otras formas de ejecutar el proyecto, por ejemplo, ¿es posible ejecutarlo directamente con xcode? Así que intente abrir WeexDemo.xcworkspace con xcode, haga clic para ejecutar y descubra que el error Pods-XXXXX.debug.xcconfig.xcconfig: no se puede abrir el archivo:
Este es un error común, la solución es muy simple:
primero hacemos un cd para el directorio de iOS, en la entrada de la línea de comando:
1, sudo gem install cocoapods --pre
2, pod install
Entonces, el resultado de la ejecución sigue siendo un error:
el análisis muestra que la versión 0.18.0 de weex-sdk no se puede descargar de forma remota.
Primero veamos el contenido del podfile generado automáticamente en la plantilla del proyecto:
source '[email protected]/CocoaPods/Specs.git'
platform :ios, '8.0'
#inhibit_all_warnings!
def common
pod 'WeexSDK'
pod 'WeexPluginLoader'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
end
target 'WeexDemo' do
common
end
target 'WeexUITestDemo' do
common
end
Se encontró WeexSDKque no se especificó ninguna versión y que el weex-sdk 0.18.0 asociado no era válido en el almacén remoto cuando se generó el proyecto de plantilla. Consulte la página de inicio oficial de github de weex para saber que la última versión del SDK es 0.30.0. Además, la plataforma ios tiene como valor predeterminado 8.0, que es demasiado bajo, y se puede actualizar a 9.0.
Así que modifique el Podfile de la siguiente manera:
source '[email protected]/CocoaPods/Specs.git'
platform :ios, '9.0'
#inhibit_all_warnings!
def common
pod 'WeexSDK','0.30.0'
pod 'WeexPluginLoader'
pod 'SDWebImage', '3.7.5'
pod 'SocketRocket', '0.4.2'
end
target 'WeexDemo' do
common
end
target 'WeexUITestDemo' do
common
end
En este momento, el weex run ioscomando en ejecución aún no puede ejecutarse, pero abra xcode y seleccione el dispositivo o simulador real, y haga clic en ejecutar para ejecutar el proyecto normalmente.
Descargue el código fuente del proyecto de demostración: https://github.com/wenzhiming/wzm-weex-demo.git
depuración
weex-toolkit también proporciona una poderosa función de depuración, solo necesita ejecutar:
weex debug
Este comando iniciará un servicio de depuración y abrirá la página de depuración en Chrome (actualmente solo admite navegadores de escritorio basados en el motor V8). Para obtener información detallada sobre el uso, consulte la documentación de weex-toolkit .