美文网首页微信小程序
小程序小项目总结

小程序小项目总结

作者: 樊小勇 | 来源:发表于2019-04-13 18:23 被阅读219次

    一、项目大致知识

    静态页面 使用Vant Weapp有赞小程序ui搭建

    https://youzan.github.io/vant-weapp/#/intro

    二、静态页面

    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里储存

    相关文章

      网友评论

        本文标题:小程序小项目总结

        本文链接:https://www.haomeiwen.com/subject/zoxlwqtx.html