一、项目大致知识
静态页面 使用Vant Weapp有赞小程序ui搭建
https://youzan.github.io/vant-weapp/#/intro
- 导航栏 使用app.json小程序自带的tabbar配置生成
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html - 渲染、数据连接等后面介绍,但运用的肯定要是小程序里的东西
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html
二、静态页面
1.引入ui库
在文件夹打开命令窗口
# npm
npm i vant-weapp -S --production
# yarn
yarn add vant-weapp --production
下载后文件夹会多出一个文件夹里面有一个dist
我们只留下dist
dist
里面放的都是ui的组件
2.配置使用ui
配置ui在app.json的usingComponents后添加需要使用的组件的路径即可在所有页面使用
3.页面插入动态值
- 数据绑定
<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
- 页面渲染
<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
- 条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>
// page.js
Page({
data: {
view: 'MINA'
}
})
三、渲染页面
1. 获取接口数据 这里使用了封装的获取接口方法
const app = getApp();
Page({
data: {
list: []
},
onLoad() {
// 检验是否登录
let user = app.utils.checkLogin();
console.log(user);
this.getlist();
},
getlist(){
let url = '/book/getList';
app.get(url).then(res=>{
// then是搭配promise使用的,用来回调结果,(当可以使用async和await的时候不需要用then)
this.setData({
// 更改data里的值使用setData,获取data的数据使用 this.data.num
list: res.books
})
})
}
})
2.微信自带获取接口数据方法
wx.request({
url: 'test.php', // 仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})
3.wx:for(循环遍历)、wx:key(键)、index(下标)、item(子体)
<view class='list flex jc-sb'>
<navigator class="mt-28 bg-fff" wx:for="{{list}}" wx:key="{{index}}" url="/pages/detail/detail?bookId={{item.bookId}}" hover-class="navigator-hover">
<view class='item'>
<view class='fcc pt-30 pb-30'>
<image class='h450' src='{{item.poster}}'></image>
</view>
<view class='flex2 jc-sb pl-30 pt-30' style='height:180rpx;'>
<view class='text f36 lipsis'>{{item.name}}</view>
<view class='f999 f32 lipsis'>{{item.author}}</view>
<view class='text'>
<text class='red'>¥{{item.price}}</text>
<text class='oldPrice f999 ml-20'>¥{{item.originPrice}}</text>
</view>
</view>
</view>
</navigator>
</view>
四、页面跳转、传参
1.navigator 相当于a 但绑定的是url
传参:
<navigator url="/pages/detail/detail?bookId={{item.bookId}}">
获取参数:
onLoad: function (options) {
this.getlist(options.bookId);
this.setData({
bookId: options.bookId
})
},
2.更多跳转可以看
https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html
3.事件传参(wxml->js)
- bindtap--类似于点击事件
传参数:
<view bindtap='setId' data-index="{{index}}"></view>
当前组件的js接参数
// 事件传参,在事件后面设置data-index属性:data-后的自取,在通过event来获取传的参数
setId(e){
// console.log(e.currentTarget.dataset['index']);
let orderId = e.currentTarget.dataset['index'];
wx.setStorageSync('orderId', orderId);
},
详细可看event篇https://www.jianshu.com/p/88fe3e483581
4.数据储存
https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html
存储数据
wx.setStorage({
key: 'key',
data: 'value'
})
获取数据
wx.getStorage({
key: 'key',
success(res) {
console.log(res.data)
}
})
大致就这样,使用到的知识点就这么多
五、注意的点
1.使用ui库可以根据它提供的函数方法变量来更加灵活的使用
2.组件之间配合使用可以减少不必要的麻烦
3.页面传参一般都是通过在url后加?接参数、参数之间又以&连接的
4.存储数据分全局和局部,局部是在组件内储存,全局是在app.js里储存
网友评论