uniapp 使用ios framework uniapp foreach

转载

编程梦想编织者 2024-07-25 14:09:10

注意:

1.在 uni-app 中不能使用 * 选择器。
2.page 相当于 body 节点
3.背景图片：本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径;注：微信小程序不支持相对路径（真机不支持，开发工具支持）

组件：

1.公共属性列表

每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性：

属性名	类型	描述
id	String	组件的唯一标识
ref	String	vue中组件的唯一标识
class	String	组件的样式类
style	String	组件的内联样式
hidden	Boolean	组件是否隐藏
data-*	Any	自定义属性;组件上出发的事件时，会发送给事件处理函数
@*	EvenHandler	组件的事件

除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。详见[vue指令]

2.Image

image widthFix:宽度不变，高度自动变化，保持原图宽高比不变

3.数据缓存

1.uni.getStorage 异步   uni.getStorageSync 同步  获取指定的key
1.uni.getStorageInfo   uni.getStorageInfoSync   获取所有的key
2.uni.setStorage  
3.uni.removeStorage
4.uni.clearStorage 清理本地数据缓存 uni.clearStorageSync() 同步清理本地数据缓存

4.界面-交互反馈

//消息提示框 默认icon为√
uni.showToast({title,icon,duration}) //显示消息提示框 设置duration自动关闭
uni.hideToast() //隐藏消息提示框

//加载框  icon为加载动画
uni.showLoading({title}) //显示loading提示框，需要主动调用uni.hideLoading提示框
uni.hideLoading() 隐藏loading提示框

uni.showModal({title,content,success()}) //显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。

uni.showActionSheet({itemList: ['A', 'B', 'C']}) //从底部向上弹出操作菜单

5.vuex和本地储存的区别

1.区别：vuex存的是状态，存储在内存，localstorage是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于页面之间的传值
3.永久性：当刷新页面时，vuex存储的值会丢失，localstorage不会
4.总结：vuex是vue的状态管理机制，是方便组件之间通信的。一个组件的数据变化是会映射到使用这个数据的其他的组件。而localstorage是本地存储，是将数据存到浏览器的方法，一般是在跨页面传递数据时使用。

6.路由与页面之间的跳转

uni.navigateTo({}) //保留当前页面，跳转到应用内的某个页面
uni.navigateBack({})//返回上一页面   delta: 返回的页面数，如果 delta 大于现有页面数，则返回到首页
uni.redirectTo({})//关闭当前页面，跳转到应用内的某个页面
uni.switchTab({})//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.relaunch({})//关闭所有页面，跳转到应用内的某个页面
uni.preloadPage({})//预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

7.界面-下拉刷新

onPullDownRefresh({}) //在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新.

uni.startPullDownRefresh({})//开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
uni.stopPullDownRefresh({})//停止当前页面的下拉刷新

8.页面生命周期

1.onLoad//监听页面加载，其参数为上个页面传递的数据
2.onShow//监听页面的显示，页面每次出现在屏幕上触发
3.onReady//监听页面初次渲染完成。
4.onHide//监听页面隐藏
 onUnload//监听页面卸载  // 点击左上角返回箭头时候触发
5.onResize//监听窗口尺寸的变化
6.onPullDownRefresh//监听用户下拉动作，一般用于下拉刷新
7.onReachBottom//页面滚动到底部的事件(scroll-view滚到底)，常用于下拉下一页数据
onTabItemTap //点击 tab 时触发
8.onShareAppMessage//用户点击右上角分享
onPageScroll //监听页面滚动，

9.页面配置

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	下拉窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面生命周期。
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

10.框架接口-页面

getCurrentPages()
//用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面;其本身是一个对象，可以在当前页面和跳转后的页面之间进行传值,用onload(argument)接收

11.组件传值

//父组件给子组件传值
props:['msg']
:msg="value"
//子组件给父组件传值
  diyMethod () {
		this.$emit('myEvent',this.status)
	}
 @myEvent="Method"  //注：Method不要加括号!!!

12.兄弟组件通讯

function(){
  this.$emit('myMethod',giveValue)
}
uni.$on('myMethod',(giveValue)=>{
    this.giveValue++
})

13.图片

uni.chooseImage({})//上传图片
uni.previewImage({})//预览图片

14.组件的条件注释

<!-- #ifdef H5 -->
<view>
  h5页面会显示
</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>
  微信小程序会显示
</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<view>
  app会显示
</view>
<!-- #endif -->

15.api的条件注释

onLoad () {
  //#ifdef MP-WEIXIN
  console.log('微信小程序')
  //#endif
    
  //#ifdef H5
  console.log('h5页面')
  //#endif
}

16.uni.getSystemInfoSync()

//获取系统信息同步接口
//windowHeight可用窗口高度
//windowWidth可用窗口宽度

17.getCurrentPages()

//getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

18.page.json

{
    "pages":[
    {
        "path":"",
        "style":"",
        "navigationStyle" : "custom",//去掉小程序端的顶部导航
    }
 ],
"globalStyle":{
    
},
"tabBar":{
    "selectedColor":"选中颜色",
    "list":[
        {
            "pagePath":"页面路径",
            "text":"文本内容",
            "iconPath":"icon路径",
            "selectedIconPath":"选中页面的icon路径"
        }
    ]
}
}

19.配置网络请求

//由于平台的限制，小程序项目中不支持 axios
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

20.用到的组件

<!--  -->
<swiper></swiper>
  <!--属性：
   indicator-dots：是否显示面板指示点，
   autoplay：是否自动切换
   interval：自动切换时间间隔
   duration：滑动动画时长
   circular：是否采用衔接滑动，即播放到末尾后重新回到开头
  -->
<swiper-item></swiper-item>
  <!--循环渲染轮播图的 item 项  -->
<scroll-view></scroll-view>
  <!--可滚动视图区域。用于区域滚动。
      属性：scroll-top:设置竖向滚动条位置,
           scroll-x/scroll-y,允许横向/纵向滚动
   -->
<uni-search-bar></uni-search-bar>
  <!--@input 为value 改变时触发事件;input(e)里面有一个参数就是输入框的内容
      cancel-text取消按钮的文字
   使用该组件时，可以增加一个定时器
   -->
<radio></radio>
  <!--checked 当前是否被选中  -->
<uni-number-box></uni-number-box>
  <!-- min 最小值
       value输入框当前值
      @change 输入框值改变时触发的事件，参数为输入框当前的 value
  -->
<rich-text></rich-text>
  <!-- 
      nodes 节点列表 / HTML String      
    -->
<uni-goods-nav ></uni-goods-nav>
   <!-- 
      属性
      options:[icon,text,infoBackgroundColor(角标背景色),infoColor(交标颜色),info(右上角数字)],组件参数
      buttonGroup:[text,backgroundColor,color],组件按钮组参数
      fill:Boolean,按钮是否平铺
      @click,左侧点击事件  
      @buttonClick,右侧点击事件
     -->

21.用到的API

uni.showToast({title:"",duration:"",icon:""})
uni.navigateTo({url:""})
uni.switchTab({url:""})
uni.getSystemInfoSync()// 获取当前系统的信息
onPullDownRefresh()//监听页面下拉事件
onReachBottom()//监听底部事件
uni.previewImage({current:为当前显示图片的链接/索引值,url:图片链接列表})
uni.setTabBarBadge({index,text}) //设置数字图标
uni.chooseAddress() //获取用户收货地址
getCurrentPages()//第一个元素为首页，最后一个元素为当前页面
uni.pageScrollTo({scrollTop,duration})//将页面滚动到目标位置。

22.页面跳转与传值

//跳转
uni.navigateTo({
    url:"/subpkg/goods_list/goods_list?query="+data
})
//接收
onLoad(data){
    data//{query:d}
}

23.vuex的基本结构

cart.js
export default{
    //围挡点模块开启命名空间
     namespaced: true,
    //模块state数据
     state:()=>({cart:{}}),
    //模块的mutations方法
     mutations(){}
    //模块的 getters属性
     getters:{}
}

store.js 
import moduleCart from '../store/cart'
const store = new Vuex.Store({
	modules: {
		moduleCart
   }
})

use.js
import {mapState,mapMutations,mapGetters} from 'vuex'
data(){
    ...mapState('moduleCart',['cart'])
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。