一个未完成的原生小程序项目
上传
点击上传-输入版本号-上传成功
设计规范
重点突出、流程明确
清晰明确：导航明确、减少等待（加载样式）、结果反馈、异常可控、有路可退
便捷：减少输入、避免误操作、利用接口提升性能、统一页面
页面
app.js app.js app.wxss
文件夹下的四个 index.js index.json index.wxml index.wxss
项目和目录文件结构
app.json:配置访问路径
"pages":[
"pages/index/index",//相对路径，配置绝对路径会报错
"pages/logs/logs"
],
index.js要放置一个page对象
index.wxml中放置元素
<text class="info">Hello World</text>
index.wxss文件：样式表文件
.info {
font-weight: bold;
color: red;
}
页面配置初探
index.json 设置页面标题（静态设置）
{
"navigationBarTitleText":"关于",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black" //只有white和black
}
view、text、image组件
text：类似span
view：类似div
class、style、id是每一个都可以设置的属性
bindtap：绑定点击事件
hidden“：是否隐藏
data-:设置自定义的属性（传递参数）
页面构成 index.wxml
<view>
<image src="/images/1.jpg"></image>
<text class="info">电影周周看</text>
<text class="info">我每周推荐一部好片</text>
<text class="info">我的微博：www.baidu.com</text>
</view>
响应式长度单位 rpx
小程序统一规定宽度为：750rpx；
访问页面
1、在全局json文件中，靠前的那个会优先显示
2、加导航链接
使用nacigator组件
- open-type属性：
- hover-class属性：
如果要单独给一行文字中的某几个字加超链接，使用nacigator标签，标签默认是块级元素，可以通过display:inline改为行内元素
<view>
<navigator style="display: inline;"
open-type="navigate" //有返回的按键
url="/pages/weekly/weekly" //链接地址
class="nav-default" //样式
hover-class="nav-hover"> //点击样式
每周打卡
</navigator><text class="info">一个济南美食</text>
</view>
//注意：当啊设置了class之后，hover-class和class重复的将不会出效果
底部标签栏-tabBar
配置底部导航栏
全局配置app.json
"tabBar": {
"list":[
{
"text": "每周推荐",
"pagePath": "pages/weekly/weekly",
"iconPath": "images/icons/1.png",
"selectedIconPath": "images/icons/3.png"
},
{
"text": "关于",
"pagePath": "pages/index/index",
"iconPath": "images/icons/2.png",
"selectedIconPath": "images/icons/4.png"
}
],
"color": "#000", //底部文字颜色
"selectedColor": "#00f" //选中之后的底部文字颜色
}
注意发现加上了tabar之后页面的跳转不好用了，需要把navigator的属性设置为open-type:switchTab
设置tabBar的默认值：修改pages属性的顺序
导航栏的全局样式
在app.json中
"window":{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程de美食" //默认标题，如果没有设置，则会使用这个
}
数据绑定
数据定义：每个页面所需要的数据，都是集中在这个页面所注册的页面对象中定义的weekly.js
Page({
data:{
thisWeekFood:{
name:"好多海鲜的面",
comment:"评价：人均40的大碗海鲜面",
imagePath:"/images/mian.jpg"
},
count:123
}
})
直接数据绑定
直接数据绑定：使用{{}}<text>{{count}}</text>，在appData中可以看到并修改数据，实时调整内部状态变量，每个页面都添加了一个额外的变量webViewId
条件渲染
wx:if:用列表数据中的isHighlyRecommended值决定是否显示强烈推荐，数据几乎不会发生改变
hidden:列表中的数据会发生改变
<!-- 条件渲染-强烈推荐 -->
<text wx:if="{{thisWeekFood.isHighlyRecommended}}" style="font-size: 16px;color: crimson;">强烈推荐</text>
<!-- 条件渲染-强烈推荐 -->
<text hidden="{{!thisWeekFood.isHighlyRecommended}}" style="font-size: 16px;color: crimson;">强烈推荐</text>
列表渲染
wx:for:直接将wx:for="{{weekFoodList}}"（注意，值要用{{}}括起来），内置item 和index可以直接使用
<view class="container">
<text>本周推荐</text>
<view class="food" wx:for="{{weekFoodList}}" >
<image class="food-image" src="{{item.imagePath}}"></image>
<view class="food-details">
<text>第{{index+1}}周:{{item.name}}</text>
<text>{{item.comment}}</text>
<!-- 条件渲染-强烈推荐 -->
<text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px;color: crimson;">强烈推荐</text>
</view>
</view>
</view>
样式：
.food{
display: flex;
}
.food-details{
display: flex;
flex-direction: column;
width: 550rpx;
}
.food-image{
width: 200rpx;
height: 180rpx;
}
swiper组件：幻灯片
indicator-dots="{{true}}":显示轮播的小点点
height: 90vh;：高度占页面高度的90%
previous-margin="50rpx" next-margin="50rpx":相邻幻灯片的间距
再通过设置margin: 20rpx;实现幻灯片之间有空白的区域，每个幻灯片的颜色是灰色，全局的颜色是白色
current="{{weekFoodList.length-1}}":设置默认显示最后一张幻灯片
<view class="">
<swiper indicator-dots="{{true}}" class="food-swiper"
previous-margin="50rpx" next-margin="50rpx" current="{{weekFoodList.length-1}}">
<swiper-item class="food" wx:for="{{weekFoodList}}" wx:key="name">
<view class="container food-card">
<image class="food-image" src="{{item.imagePath}}"></image>
<text>第{{index+1}}周:{{item.name}}</text>
<text>{{item.comment}}</text>
<!-- 条件渲染-强烈推荐 -->
<text wx:if="{{item.isHighlyRecommended}}" style="font-size: 16px;color: crimson;">强烈推荐</text>
</view>
</swiper-item>
</swiper>
</view>
.food-swiper{
height: 90vh;
}
.food-card{
height: 100%;
width: 100%;
background-color: #eee;
margin: 20rpx;
}
页面的生命周期函数
在data中的一个数据不可以引用另一个数据，会报错,所以需要在onLoad：监听页面加载
onLoad: function (options) {
this.setData({
curPage:this.data.weekFoodList.length - 1
})
}
onLoad：监听页面加载，页面的初始化
onshow：页面每一次被显示
onready：页面初始渲染完成，视图准备好进行交互
onhide：页面每次被隐藏
onunload：页面被关闭或者卸载
更新数据
在小程序中对数据进行更新，不能通过直接赋值的方式，小程序通过直接复制的方式更新了数据的值，但是不会直接渲染到页面上。
进行赋值需要使用小程序提供的this.setData()方法
f0:function(event){
this.data.count = this.data.count+1;
}
//这样可以再AppData中看到count的值已经加一了，但是页面上没有
f0:function(event){
this.setData({
count:this.data.count+1
"weekFoodList[2].name" = "烤肉滋滋滋"
})
}
//this.setData不仅可以更新已有的数据的取值，还可以动态的更新不存在的值
//如果找不到：左边的值会创建一个这样的值，并把初始值设置为这个值
//还可以对数据中某一小部分的值进行更新，但是前面的值要用引号括起来
幻灯片切换后，current的值发生了变化，但是绑定的currentIndex的值没有变化
视图层的更新不会自动的引起内部数据的变化
事件机制
<view>
<text>{{count}}</text>
<button bindtap="f0">+1</button>
</view>
bindtap和catchtap的区别：和事件冒泡机制有关， 使用bindtap绑定事件，如果view也有bindtap的话会一起触发，使用的如果是catchtap则不会触发
组件的自定义数据属性
data-food-id:用data-自定义属性，在事件中会有event.currentTarget.dataset.foodId
wx.navigateTo:用于路由跳转
<view class="container food-card" bindtap="goToDeails" data-food-id="{{item.id}}">
goToDeails: function(event){
var foodId = event.currentTarget.dataset.foodId;
wx.navigateTo({
url: '/pages/details/details?id='+foodId,
})
}
传递的数据在另一个页面接受并使用
Page({
data: {},
onLoad: function (options) {
this.setData({
fid: options.id
})
}
})
<text>foodId = {{fid}}</text>
发起请求api
wx.request：异步调用，我们请求的路径必须是配置过的
wx.request({
url:"", //请求的路径
methods:"GET", //请求的方式
data:{ //请求的携带的参数
},
header:{ //请求头设置
},
success:function(res){ //成功的回调函数，只要调通了接口就会执行success
//返回的参数有data、header、statuesCode
},
fail:function(){ //失败的回调函数
},
complete:function(){ //无论成功还是失败都会调用的回调函数
},
})
浙公网安备 33010602011771号