小程序小项目总结

一、项目大致知识

静态页面 使用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里储存