uni-app

直接上源码， 注意的坑 1、小程序的 watch 监听不能用，在H5 平台这样没问题,反正就是这玩意不好用。 2、父组件调用子组件的方法得放到mounted里，不然就是undefined 加载组件 <template name="pre_loading_full"> <view id="loader-wrapper" v-show="show_loading"> <view id="loader"></view> <view class="loader-section section-left"></view> <view class="loader-section section-right"></view> <view class="load_title"> {{ loading_title }} <br /> <!-- <span>V1.0</span> --> </view> </view> </template> <script> /* 名称：简单全屏loading 日期：2020-02-25 作者：hj 目标：简单等待窗 */ export default { name: "pre_loading_full", data() { return { show_loading: false, loading_title: '玩命加载中' }; }, // watch 不好用

基本等同与vue，把代码跑一下，看看就明白了。 其中， v-hidden 貌似不管是 true or false 都有显示 v-show 才切换。 和vue 一样，数组循环中要加key绑定，只不过如果不加的话会有警告。 <view v-for="(item, index) in students" :key="index" > <view class="persons">{{index}} - {{item.name}}</view> </view> 测试源码 <template> <view class="content"> <image class="logo" src="../../static/logo.png"></image> <view> <text class="title">{{title}}</text> </view> <h5>-------数据绑定展示 基本数据-------</h5> {{name}} <h5>-------数据绑定展示 数组-------</h5> <view v-for="(item, index) in students" :key="index" > <view class="persons">{{index}} - {{item.name}}</view> </view> <view v-if="show_if">

页面常用生命周期 不论是app还是小程序，生命周期是非常重要的知识点。 uni-app 支持如下页面生命周期函数： onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 object （用于页面传参），参考示例 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载 onPullDownRefresh 监听用户下拉动作 onReachBottom 页面上拉触底事件的处理函数 onShareAppMessage 用户点击右上角分享 微信小程序 onPageScroll 监听页面滚动 onTabItemTap 当前是 tab 页时，点击 tab 时触发。 样例 <script> export default { data: { title: 'Hello' }, onLoad:function(options){ console.log("onLoad"); }, onHide:function(){ console.log("onHide"); }, onShow:function(){ console.log("onShow"); } } </script> 来源： oschina 链接： https://my.oschina.net/qingqingdego/blog/3161207

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。 Tips 当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 属性说明： color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar 上边框的颜色，仅支持 black / white list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab position String 否 bottom 可选值 bottom 、 top 其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下： pagePath String 是 页面路径，必须在 pages 中先定义 text String 是 tab 上按钮文字 iconPath String 否 图片路径， icon 大小限制为 40kb ，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

// html <template> <view> <view class="uni-padding-wrap uni-common-mt" @touchstart="start" @touchend="end"> <movable-area scale-area> <movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale"> <image :src="img" mode="widthFix"></image> </movable-view> </movable-area> </view> </view> </template> //js <script> export default { data() { return { img:'', scale:1, startData:{ clientX:'', clientY:'' } } }, onLoad(option) { this.img = option.imgs; }, methods: { onScale(){ }, start(e){ this.startData.clientX=e.changedTouches[0].clientX; this.startData

居家隔离14-9 请求方式 <template> <view> <view>默认请求结果{{text}}</view> <view><button type="primary" @click="fun_post">自定义请求1</button></view> <view>{{td1}}</view> <view><button type="primary" @click="fun_post">自定义请求2</button></view> <view>{{td2}}</view> </view> </template> <script> import { Method_EasySelect } from '../../utils/loadhttpdata.js'; export default { data() { return { text: '', td1: "", td2: "" } }, onLoad: function() { // 官方原版请求方式 uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1.准备文件 自己到DCloud官网： http://dcloud.io/ 去下载官方的IDE Hbuilder，新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件： bootstrap.min.css //bootstrap 4 以上。 https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css bootstrap-vue.min.css // https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.min.css bootstrap-vue.min.js // https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.min.js (最新vue压缩： https://unpkg.com/vue@latest/dist/vue.min.js ) 2.修改 main.js import BootstrapVue from './common/js/bootstrap-vue.min' == import BootstrapVue from '@/common/js

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> app-plus Object 设置编译到 App 平台的特定样式，配置项参考下方 app-plus App 参考地址 https://uniapp.dcloud.io/collocation/pages app-plus 配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles。 titleNView Object 导航栏 ，详见:导航栏 App、H5 subNVues Object 原生子窗体，详见:原生子窗体 App 1.9.10+ bounce String 页面回弹效果，设置为 "none" 时关闭效果。 App（nvue Android无页面级bounce效果，仅list、recycle-list、waterfall等滚动组件有bounce效果） softinputNavBar String auto iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。 仅ios生效 softinputMode String adjustPan 软键盘弹出模式，支持 adjustResize、adjustPan 两种模式 App pullToRefresh Object 下拉刷新 App scrollIndicator

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码，uni-app将其编译到Ios,android,微信小程序等多个平台，保证其正确并达到优秀体验。 Uni-app继承自vue.js，提供了完整的vue.js开发体验。 uni-app组件规范和扩展api与微信小程序基本相同。 有一定vue.js和微信小程序开发经验的开发者可快速上手uni-app，开发出兼容多端的应用。 uni-app提供了条件编译优化 pages.json: 配置页面路由，导航条，选项卡等页面类信息。 manifest.json: 配置应用名称，appid，Logo，版本 app.vue 应用配置，用来配置app全局样式以及监听应用的生命周期。 main.js: vue初始化入口文件 static目录：存放应用引用静态资源 pages目录：业务页面文件存放目录 components目录：组件文件存放目录 uni-app页面样式与布局 重要说明 请删除app.vue中的全局样式，view{display:flex;} 在需要flex的时候使用flex即可。 尺寸单位 uni-app框架目前仅支持长度单位px和%，与传统web页面不同，px是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于rem

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 5G这个新时代发展之下的产物，所影响的不是只有科技业，从生产到生活，各个行业都将为其到来发生改变，包括可穿戴设备等领域将释放出大量的前端开发需求。而处在人与物连接的互联网就显的由为重要，不管多先进的技术都需要端口的介入，前端开发的重要也更是不言而喻的。 随着近些年来前端开发的比重逐渐加大，整个开发团队的人员配备正在向前端倾斜，包括Android开发、iOS开发、PC端开发、小程序开发等日趋火热重要，前端工程师的角色占比进一步提升。 什么是前端？ 前端是从网页制作进化过来的一种叫法。早期的前端也就是网页制作，现在的前端其实叫法变成了大前端。 前端和大前端有什么区别? 早期的前端是开发网页的，而现在的前端，随着Node.js（后端语言）的兴起，给前端带来了很大的变化，让前端的职责范围变得越来越大。所以称之为大前端。 大前端能做哪些东西？ 一、PC端开发 1.网页开发（浏览器打开的所有的页面都是前端工程师开发的） 2.app开发（电脑上的软件） 二、移动端开发（2019年整个互联网的发展都是倾向移动端的，这也是大前端火的原因） 移动端网页开发 移动端app开发 1.原生app开发（安卓和ios，跟前端没啥关系，这种方式成本高，难维护） 2.webapp（完全使用h5技术开发的app，163邮箱，QQ空间，百度新闻