环境准备
- 安装HBuilderX
- 安装插件
- 内置浏览器
- 内置终端
- app真机运行
- prettier
- scss/sass编译
项目搭建
- div h1标签都是web标签,无法自动转化未小程序,app
- 必须使用官方兼容性标签 view text
- 标签
- view
- text
- navigator
- 页面跳转
- url
- button
button
<button type="default" @click="goDetail">详情页</button>
methods: {
goDetail() {
// 页面跳转
uni.navigateTo({
url: '../detail/detail',
success: res => {},
fail: () => {},
complete: () => {}
});
}
}
url参数传递
// 定义参数
data(){
return {
name:'xx',
age:30
}
}
- navigator参数传递
<navigator :url="`../detail/detail?name=${name}&age=${age}`">详情页</navigator>
- uni.navigateTo参数传递
uni.navigateTo({
url: `../detail/detail?name=${this.name}&age=${this.age}`,
});
- 获取url参数
data(){
return {
name:'',
age:''
}
},
onLoad(e){
console.log(e)
const {age,name} = e;
this.age = age
this.name = name
}
pages.json
- tabBar
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/wx.png",
"selectedIconPath": "static/wx_hl.png",
"text": "首页"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/my.png",
"selectedIconPath": "static/my_hl.png",
"text": "我的"
}]
}
- pages.style.enablePullDownRefresh
- 是否允许下来刷新
manifest.json
- h5
- 设置代理
"h5":{
"devServer":{
"proxy":{
"/xxx":{
"target":"https://xxx/xxx",
"changeOrgin":true;
"secure":true,
"pathRewrite":{
"^/xxx":""
}
}
}
}
}
components
- easycom机制
- 组件必须放入改文件夹
生命周期
- 应用生命周期
- App.vue
- onLaunch
- onShow
- onHide
- App.vue
- 页面生命周期
- onLoad
- onShow
- onHide
- onReachBottom
- 上拉触底
- onPullDownRefresh
- 下来刷新
- 组件生命周期
- vue相关
- mounted
- vue相关
组件
uni_ui
- uni-badge
- 数字角标
<uni-badge size="small" :text="100" absolute="rightTop" type="primary">
<button type="default">右下</button>
</uni-badge>
- uni-card
- 卡片
<uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息">
<text>这是一个通栏卡片 ,通栏没有外边距,左右会贴合父元素。</text>
</uni-card>
-
uni-dateformat
- 日期
-
uni-collapse
- uni-collapse-item
- 折叠面版
-
uni-notice-bar
- 通告栏
-
uni-list
- uni-list-item
- 列表组件
-
uni-load-more
- 加载更多
- onReachBottom
- 监听页面触底
-
uni-rate
- 评分
-
uni-steps
- 步骤条
-
uni-popup
- 弹出层
- open()
- close()
-
uni-grid
- 宫格
-
uni-swiper-dot
- swiper
- swiper-item
- 轮播图
- swiper
-
scroll-view
- 滚动栏
-
uni-search-bar
- 搜索栏
-
uni-index-list
- 索引列表
-
uni-goods-nav
- 商品导航
网络请求
- uni.request
uni.request({
url:'',
method:'GET',
data:{},
success:res=>{
// 成功时调用
console.log(res)
},
fail:()=>{
// 失败时调用
},
complete:()={
// 不管成功失败都会调用
}
})
条件编译
- idndef
- iddef
// 如果不是h5,编译该url
#idndef H5
url:"https://xxx/xxx"
#endif
// 如果是h5,编译该url
#ifdef
url:'/xx/xx'
#endif