一.静态部分

1.标签及其组件

1. 在微信小程序中主要的标签有view和text, 其中view是块级标签，与html中的div差不多，
   而text则是行内标签，类似于HTML中的span标签。
2. 在小程序的官方文档中有很多的组件，很多常用的组件都会有，所以可以省去很多的写静态的麻烦事，以下则是在本次项目中用到的一些组件
   1.轮播图 [swiper(https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
   2.复选框
   checkbox-group(https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html)
   3.按钮
   [button(https://developers.weixin.qq.com/miniprogram/dev/component/button.html)
   4.开放能力
   获取头像及昵称
3. 有赞小程序ui库 地址：(https://youzan.github.io/vant-weapp/#/quickstart)
   由于小程序自带的组件并不能完全的满足项目的需求所以引入有赞ui库。

方法一

1.下载有赞ui库，将其中的dist文件移入到我们的项目中

2. 在app.json文件中的"usingComponents"中将dist中所有的组件引入

"usingComponents": {
    "van-action-sheet": "./dist/action-sheet/index",
    "van-area": "./dist/area/index",
    "van-badge": "./dist/badge/index",
    "van-badge-group": "./dist/badge-group/index",
    "van-button": "./dist/button/index",
    "van-card": "./dist/card/index",
    "van-cell": "./dist/cell/index",
    "van-cell-group": "./dist/cell-group/index",
    "van-checkbox": "./dist/checkbox/index",
    "van-checkbox-group": "./dist/checkbox-group/index",
    "van-col": "./dist/col/index",
    "van-dialog": "./dist/dialog/index",
    "van-field": "./dist/field/index",
    "van-goods-action": "./dist/goods-action/index",
    "van-goods-action-icon": "./dist/goods-action-icon/index",
    "van-goods-action-button": "./dist/goods-action-button/index",
    "van-icon": "./dist/icon/index",
    "van-loading": "./dist/loading/index",
    "van-nav-bar": "./dist/nav-bar/index",
    "van-notice-bar": "./dist/notice-bar/index",
    "van-notify": "./dist/notify/index",
    "van-panel": "./dist/panel/index",
    "van-popup": "./dist/popup/index",
    "van-progress": "./dist/progress/index",
    "van-radio": "./dist/radio/index",
    "van-radio-group": "./dist/radio-group/index",
    "van-row": "./dist/row/index",
    "van-search": "./dist/search/index",
    "van-slider": "./dist/slider/index",
    "van-stepper": "./dist/stepper/index",
    "van-steps": "./dist/steps/index",
    "van-submit-bar": "./dist/submit-bar/index",
    "van-swipe-cell": "./dist/swipe-cell/index",
    "van-switch": "./dist/switch/index",
    "van-switch-cell": "./dist/switch-cell/index",
    "van-tab": "./dist/tab/index",
    "van-tabs": "./dist/tabs/index",
    "van-tabbar": "./dist/tabbar/index",
    "van-tabbar-item": "./dist/tabbar-item/index",
    "van-tag": "./dist/tag/index",
    "van-toast": "./dist/toast/index",
    "van-transition": "./dist/transition/index",
    "van-tree-select": "./dist/tree-select/index",
    "van-datetime-picker": "./dist/datetime-picker/index",
    "van-rate": "./dist/rate/index",
    "van-collapse": "./dist/collapse/index",
    "van-collapse-item": "./dist/collapse-item/index",
    "van-picker": "./dist/picker/index"
  }

完成后就可以在项目中使用有赞ui库了

方法二

通过npm安装使用

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

二.路由

1. 路由配置

在APP.json 文件中进行配置

"pages": [
    "pages/home/home"
]

2. 路由跳转

一.普通页面跳转
1使用navigator标签跳转

 <navigator url="/page/navigate/navigate">跳转到新页面</navigator>

2使用js事件进行跳转

wx.navigateTo({
         
          url: '/pages/placeorder/placeorder?datastr='+datastr,
        })

二.tabBar页面跳转：
1.在标签跳转时
添加属性open-type="switchTab"

 <navigator  open-type="switchTab" url="/pages/index/index">跳转到新页面</navigator>

2.js跳转

 wx.navigateTo({
        url: '/pages/index/index'
      })

不管是标签跳转还是js跳转传参都直接在URL后拼接

1.标签跳转传参

 <navigator url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>

2.js跳转传参

wx.navigateTo({
         
          url: '/pages/placeorder/placeorder?datastr='+datastr,
        })

传参后在目标页面将参数取出,(传过来的数据在生命周期函数的参数options中 )
（注意传参是如果要将对象之类的数据传过去需要将数据先转换成JSON数据，然后再在接收页面转换成原来的数据类型）

onLoad: function (options) {}

三.数据存储（将数据存储到Storage中）

1. 存

wx.setStorageSync('token', res.user.token)

2. 取

wx.getStorageSync('token')

四.自定义组件

1.文件的最外层创建文件夹，在里面新建Component文件
2.使用：在需要用到组件的页面文件中的josn文件中进行引入,接下来就可以在当前的页面文件中使用组件了

 "usingComponents": {
    "submit-bar":"../../compents/submit-bar/index"
  }

3.父子组件传参（https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html）
1.父传子（属性传值）

//父传子（属性传值）
<submit-bar totalMoney="{{totalMoney}}"></submit-bar>

子接收

 properties: {
    totalMoney:String
  },

2.子传父（事件传值）
在父组件自定义事件
1父组件wxml中的子组件标签上

<submit-bar bindsubmit="submit"></submit-bar>

2父组件的js
自定义事件上的形参就是用来接收子组件传递过来的值的

submit(e) {
//打印子组件传过来的值，
    console.log(e.detail);
  },

3子组件触发父组件上的自定义事件 ( {username:'我是子组件'}就是子组件要传给父组件的值)

 this.triggerEvent('submit',{username: '我是子组件'}); 

五.生命周期新写了一篇文章链接在下面

https://www.jianshu.com/p/fcbd1d3e7258