前端技术

uni-app学习

每个 .vue 文件最多包含一个 < template> 块。每个 .vue 文件最多包含一个 < script> 块。一个 .vue 文件可以包含多个 < style> 标签。导入 < script src="./script.js"> uni-app框架目前仅支持长度单位 px 和 %。 PS：uni-app 的基准宽度为 750px。样式导入

作者: 王明昌
发布时间: 2019-04-30
最后更新: 2019-04-30

pages.json 配置(tabbar/窗口) http://www.hcoder.net/tutorials/info_1339.html

生命周期

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参），参考示例 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载 onPullDownRefresh 监听用户下拉动作 onReachBottom 页面上拉触底事件的处理函数 onShareAppMessage 用户点击右上角分享微信小程序 onPageScroll 监听页面滚动 onTabItemTap 当前是 tab 页时，点击 tab 时触发。

数据绑定

data: {
  title: 'Hello',
  name : 'hcoder'
 }, .....
 {{title}}

列表渲染


   {{index}} - {{item.name}}
  

data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 },

条件渲染


   这里是条件展示的内容....


show:false

hidden


   这里是条件展示的内容....

class style 绑定

事件处理、事件绑定、事件传参

web uniapp 对应表 click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'tap', longtap: 'longtap', input: 'input', change: 'change', submit: 'submit', blur: 'blur', focus: 'focus', reset: 'reset', confirm: 'confirm', columnchange: 'columnchange', linechange: 'linechange', error: 'error', scrolltoupper: 'scrolltoupper', scrolltolower: 'scrolltolower', scroll: 'scroll' 在 input 和 textarea 中 change 事件会被转为 blur 事件。事件绑定 @click


methods:{
  clickTest: function(e){
   console.log(e);
   console.log('click');
  },
  longtap: function(e){
   console.log(e);
   console.log('longtap');
  }
 }

事件传参


   {{index}} - {{item.name}}
 
menuClick : function(e){
  console.log(e);
  console.log(e.target.id);
 }

组件

基本组件 https://uniapp.dcloud.io/component/README 表单组件 http://uniapp.dcloud.io/component/button navigator http://www.hcoder.net/tutorials/info_1347.html

媒体组件地图组件

    
    
    markers: [{
        width : 40,
        height: 40,
        latitude: 39.909,
        longitude: 116.39742,
        iconPath: '../../../static/p.png'
    }]

uni.request(OBJECT) 发起网络请求

get

 uni.request({
   url: 'https://demo.hcoder.net',
   success: function (res) {
    console.log(res.data);
  }

post

uni.request({
   url: 'https://demo.hcoder.net/index.php',
   data: {name : 'hcoder...', 'age' : 18},
   method:"POST",
   header : {'content-type':'application/x-www-form-urlencoded'},
   success: function (res) {
    console.log(res.data);
   }
});

图片的相关接口

http://www.hcoder.net/tutorials/info_1351.html

uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。
    uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(JSON.stringify(res.tempFilePaths));
        }
    });

预览图片
    uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function (res) {
            // 预览图片
            uni.previewImage({
                urls: res.tempFilePaths
            });
        }
    });
uni.getImageInfo(OBJECT) 获取图片信息
    uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: function (res) {
            uni.getImageInfo({
                src: res.tempFilePaths[0],
                success: function (image) {
                    console.log(image.width);
                    console.log(image.height);
                }
            });
        }
    });
uni.saveImageToPhotosAlbum(OBJECT)保存图片到系统相册
    uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePaths[0],
        success: function () {
            console.log('save success');
        }
    });

上传

uni.uploadFile(OBJECT) 客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

    
    

    getExeName($_FILES['file']['name']);
                if($exename != 'png' && $exename != 'jpg' && $exename != 'gif'){
                    exit('不允许的扩展名');
                }
                $imageSavePath = uniqid().'.'.$exename;
                if(move_uploaded_file($_FILES['file']['tmp_name'], $imageSavePath)){
                    echo $imageSavePath;
                }
            }
        }

        public function getExeName($fileName){
            $pathinfo      = pathinfo($fileName);
            return strtolower($pathinfo['extension']);
        }
    }

数据缓存

uni.setStorage(OBJECT) 异步 uni.setStorageSync(KEY,DATA)同步 uni.getStorage(OBJECT)异步 uni.getStorageSync(KEY)同步 uni.getStorageInfo(OBJECT)异步 uni.getStorageInfoSync()同步 uni.removeStorage(OBJECT)异步 uni.removeStorageSync(KEY)同步 uni.clearStorage() uni.clearStorageSync()同步

设备相关

https://uniapp.dcloud.io/api/system/info

交互反馈

uni.showToast uni.showLoading uni.hideToast uni.hideLoading uni.showModal uni.showActionSheet http://uniapp.dcloud.io/api/system/info

设置导航条

uni.setNavigationBarTitle uni.showNavigationBarLoading uni.hideNavigationBarLoading uni.setNavigationBarColor http://uniapp.dcloud.io/api/ui/navigationbar

下拉树新

onPullDownRefresh 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。 uni.startPullDownRefresh(OBJECT) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

    page.json 开启下拉刷新
    {
     "pages": [
      {
       "path": "pages/index/index",
       "style": {
        "navigationBarTitleText": "hi uni",
        "enablePullDownRefresh": true
       }
      }, 
      .......

    index.vue

上拉加载更多

小程序登陆

http://www.hcoder.net/tutorials/info_1360.html

h5+app登陆

http://www.hcoder.net/tutorials/info_1361.html

自定义组件

http://www.hcoder.net/tutorials/info_1362.html