uni-app开发总结
开发环境搭建下载HBuilderX
下载地址:https://www.dcloud.io/hbuilderx.html安装插件
打开菜单: 工具 > 插件安装,安装以下插件
App真机运行
es6编译
eslint-js
eslint-plugin-vue
less编译
scss/sass编译
stylus编译
uni-app App调试
uni-app编译
uni-app的开发总结条件编译写法:以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
#ifdef:if defined 仅在某平台存在
#ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称
详细文档请看:https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
适配uni-app 支持的通用 css 单位包括 px、rpx
px 即屏幕像素
rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰 ...
uni-app问题收集及解决
css部分nvue支持sass但是不支持sass的嵌套
变量使用(支持)
<style lang="scss"> $lineBorderColor: yellow; .icon_right{ font-size: 50px; color: $lineBorderColor; }</style>
外部scss文件引入(支持)
<style lang="scss"> @import "../../constant/css/constant.scss"; .icon_right{ font-size: 50px; color: $lineBorderColor; }</style>
nvue不支持sass嵌套
nvue支持sass的所有其他属性,举例mixin(混合)
// constant.scss文件$ ...
react native日常开发遇到的问题
react-native navigationOptions中不能获取this、state场景:在createStackNavigator路由过来的页面,navigationOptions的header中添加搜索框
如下图:
static navigationOptions = { headerStyle: {backgroundColor: '#0086f1'}, headerTitle: ( <TextInput placeholder={'请输入搜索内容'} onChangeText={(text) => this.setState({'str': text})};constructor(props) { super(props); this.state = ({ str: '' ...
react-native开发总结——常用插件
多环境配置react-native-config
详细文档请看: https://github.com/luggit/react-native-config
下载安装包: 当前版本(“react-native-config”: “^1.3.1”)
yarn add react-native-config
连接库: (react-native 0.60版本后可以不执行这个命令)
npx react-native link react-native-config
ios端需要连接库:
在当前项目下进入ios目录, 执行:pod install
android端链接库:
在当前项目下的android/settings.gradle添加:
include ':react-native-config'project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native- ...
react-native开发总结——react-navigation
介绍
react-navigation 路由导航(用于页面跳转, 4.x的版本)包括:createStackNavigator:页面跳转的路由导航createSwitchNavigator:底部tabbarcreateDrawerNavigator:抽屉侧边栏导航
createStackNavigator:页面跳转的路由导航使用步骤核心包:react-navigation npm install react-navigation
依赖项目: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
使用createStackNavigator 基础导航器 前置安装 npm install react-navigation-st ...
react-native开发总结
开发环境的搭建下载jdk
下载地址: https://www.oracle.com/java/technologies/javase-downloads.html
注意:推荐下载jdk1.8及以上的版本,下载之后配置环境变量
下载android studo
下载地址: https://developer.android.google.cn/studio/
android studo推荐使用3.5以上的版本,然后下载android sdk,选择8.1以上的版本
创建react-native项目
输入命令:npx react-native init myproject
分辨率的适配, Dimensions
详细代码如下:import { Dimensions, View } from 'react-native'// 适配方案export const sumPx = { dpi: (w) =&g ...