一.靜態(tài)部分

1.標(biāo)簽及其組件

1. 在微信小程序中主要的標(biāo)簽有view和text, 其中view是塊級標(biāo)簽荒辕，與html中的div差不多，
   而text則是行內(nèi)標(biāo)簽兄纺，類似于HTML中的span標(biāo)簽。
2. 在小程序的官方文檔中有很多的組件钦奋，很多常用的組件都會有疙赠，所以可以省去很多的寫靜態(tài)的麻煩事付材，以下則是在本次項目中用到的一些組件
   1.輪播圖 [swiper(https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
   2.復(fù)選框
   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. 路由跳轉(zhuǎn)

一.普通頁面跳轉(zhuǎn)
1使用navigator標(biāo)簽跳轉(zhuǎn)

 <navigator url="/page/navigate/navigate">跳轉(zhuǎn)到新頁面</navigator>

2使用js事件進行跳轉(zhuǎn)

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

二.tabBar頁面跳轉(zhuǎn)：
1.在標(biāo)簽跳轉(zhuǎn)時
添加屬性open-type="switchTab"

 <navigator  open-type="switchTab" url="/pages/index/index">跳轉(zhuǎn)到新頁面</navigator>

2.js跳轉(zhuǎn)

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

不管是標(biāo)簽跳轉(zhuǎn)還是js跳轉(zhuǎn)傳參都直接在URL后拼接

1.標(biāo)簽跳轉(zhuǎn)傳參

 <navigator url="/page/navigate/navigate?title=navigate">跳轉(zhuǎn)到新頁面</navigator>

2.js跳轉(zhuǎn)傳參

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

傳參后在目標(biāo)頁面將參數(shù)取出,(傳過來的數(shù)據(jù)在生命周期函數(shù)的參數(shù)options中 )
（注意傳參是如果要將對象之類的數(shù)據(jù)傳過去需要將數(shù)據(jù)先轉(zhuǎn)換成JSON數(shù)據(jù)，然后再在接收頁面轉(zhuǎn)換成原來的數(shù)據(jù)類型）

onLoad: function (options) {}

三.數(shù)據(jù)存儲（將數(shù)據(jù)存儲到Storage中）

1. 存

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

2. 取

wx.getStorageSync('token')

四.自定義組件

1.文件的最外層創(chuàng)建文件夾存谎，在里面新建Component文件
2.使用：在需要用到組件的頁面文件中的josn文件中進行引入,接下來就可以在當(dāng)前的頁面文件中使用組件了

 "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中的子組件標(biāo)簽上

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

2父組件的js
自定義事件上的形參就是用來接收子組件傳遞過來的值的

submit(e) {
//打印子組件傳過來的值，
    console.log(e.detail);
  },

3子組件觸發(fā)父組件上的自定義事件 ( {username:'我是子組件'}就是子組件要傳給父組件的值)

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

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

http://www.reibang.com/p/fcbd1d3e7258