我的uniapp笔记

基础知识

官网

项目创建

• 设置淘宝镜像npm config set registry http://registry.npm.taobao.org/
• npm install -g @vue/cli
• vue create -p dcloudio/uni-preset-vue my-project
• 启动 npm run dev:mp-weixin
• 在微信开发者工具导入
  • 项目名/dist/dev/mp-weixin

样式

• 使用sass
  • 安装 sass依赖 npm install sass-loader node-sass
  • 在style中 style lang="scss"
  • ps：小程序中 750rpx为屏幕的宽度

基本语法

• 数据展示

  • {{msg}}
  • <a :data-id="id">

• 循环

  • v-for="(item,index) in list" :key="item.id"

• 判断

  • v-if="" 直接删除
    • 再循环中想要v-if 建议使用计算属性进行过滤
  • v-show="" 通过样式

• 计算属性 computed

  computed: {
  	cnMoney() {
      return "￥" + this.money;
    },
    // 过滤数组
    filterList() {
      // 只要id >1 
      return this.list.filter(v => v.id > 1);
    }
  }

事件

• 使用
  • @click=“handleClick”
  • methods中定义handleClick
• 传参
  • @click="handleClick(1)“ 接收 handleClick(num)
  • data-index=“22” @click="handleClick(2,$event)
    • $event固定写法
    • handleClick(num,event)

组件

简单使用

• 定义
  • src下新建components/xxx.vue
• 引入
  • 页面中引入 import 组件名 from 路径
  • import imgBorder from “@/components/img-border”; // @代表src目录
• 注册
• 新增 components属性

 components: {
    imgBorder
 },

• 使用
  • <imgBorder> 或者 <img-border>

传参

• 父 -> 子
  • 父 <img-border :imgSrc="src1" ></img-border>
  • 子通过prop接收

  props:{
      imgSrc:String,
  },
  
  <img :src="imgSrc" alt="">
  

• 子 -> 父
  • 子组件通过触发事件方式向父组件传递数据

  `<img @click="handleClick" :src="imgSrc" alt="">`
   handleClick(){
       // 子向父 传递数据  通过触发事件
       // this.$emit("自定义的事件名称","要传递的参数");
       this.$emit("srcChange",this.imgSrc);
   }
  

  • 父组件通过监听事件方式接收数据

  <imgBoder @srcChange="handleSrcChange" :imgSrc="src1"></imgBoder>
  
  methods: {
        handleSrcChange(e){
            this.src=e;
        }
    },
  

• 全局共享数据
  • vue原型
    • Vue.prototype.xxxx = ‘’ // 在main.js定义
    • this.xxxx 获取
  • 微信小程序特有
    • 在App.vue 定义globalData:{xxxx:"www.360.com‘}
    • 获取 getApp().globalData.xxxx
  • vuex
  • localstorage sessionStorage

插槽

• 子组件需要父组件传过来的标签出 放一个 <slot></slot>标签
• 父组件 直接在子组件标签中放标签即可

生命周期

• 全局 App onLunch
• 页面 onLoad onShow
• 组件 mounted

-------------项目---------------------------------

引入阿里字体图标

• 下载
• 新建src/styles
• 引入 App.vue 引入

<style>
	@import "./styles/base.wxss";
	@import "./styles/iconfont.wxss";
</style>

uni-ui 使用

• 安装 npm install @dcloudio/uni-ui
• 使用 uni-ui
  • 注册

  import {uniBadge} from '@dcloudio/uni-ui'
  export default {
      components: {uniBadge}
  }
  

  • 使用 <uni-badge text="1"></uni-badge>

封装异步请求

• uni-api不方便

// es6  promise 微信小程序的api的铺垫 
export default (params)=>{

    // 加载中
    uni.showLoading({
      title:"加载中"
    })
  
    return new Promise((resolve,reject)=>{
  
      wx.request({
        ...params,
        success(res){
          resolve(res.data);
        },
        fail(err){
          reject(err);
        },
        complete(){
          uni.hideLoading();
        }
      })
  
    })
}

首页

• tab栏切换 参考tab切换
• vscode插件 css tree
  • 选中一段html标签 command shift p 选择generate css tree

封装自己的超链接组件

• 传递索引和图片数组过去

封装手势滑动

下载图片到本地

• 示例代码

  // 点击下载图片 async await promise
    async handleDownload() {
        await uni.showLoading({
            title:"下载中"
        })

        // 1 将远程文件下载到小程序的内存中 tempFilePath
        const result1 = await uni.downloadFile({ url: this.imgDetail.img });
        const { tempFilePath } = result1[1];

        //  2 将小程序内存中的临时文件下载到本地上
        const result2 = await uni.saveImageToPhotosAlbum({ filePath: tempFilePath });
        // console.log(result2);
        // 3 提示用户下载成功
        // console.log("下载城市");

        uni.hideLoading();
        await uni.showToast({
            title:"下载成功"
        // icon
        })
    },

css样式总结

• 背景