小程序项目总结

目录（各种框架通用套路）

• 一、静态页面
• 二、生命周期
• 三、获取数据
• 四、渲染页面
• 五、绑定事件
• 六、路由
• 七、页面传参
• 八、存储(本地存储)
• 九、自定义组件

一、小程序静态页面

• （1）使用小程序组件,view相当于div（块级元素），text相当与span（行内元素）

• （2）使用rpx作为小程序单位，可以根据屏幕宽度进行自适应。

  • 1px = 2rpx
  • 开发微信小程序时设计师可以用 iPhone6 （width= 750rpx）作为视觉稿的标准。

• （3） page{} 该页面的最外层的容器标签，常用于给该页面设置背景颜色

• （4）开放数据open-data

  • 用于展示微信开放的数据。
  • 如用户名，性别

  <open-data type="userAvatarUrl"></open-data>
  <open-data type="userGender" lang="zh_CN"></open-data>
  

• （5）导入有赞小程序ui库到项目中（有赞的自定义组件）

  • 使用文档地址：https://youzan.github.io/vant-weapp/#/intro
  • 下载有赞小程序ui库，将其中的dist文件导入到我们的项目的根目录

        npm i vant-weapp -S --production

• 配置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"
        }

二、小程序生命周期

三、获取数据

• （1） 小程序只支持https
• （2）需要配置域名白名单
• （3）开发阶段可以取消域名校验 开发者工具右上角点击详情 ==> 不校验合法域名

四、渲染页面

• （1）在模板上直接获取data中的数据

      <view> {{ message }} </view>

• （2）在js中通过this.data.xxx获取data中的数据，通过this.setData()修改data中的数据

• （3）条件渲染wx:if="{{}}"

      <view wx:if="{{show}}"> True </view>

• （4）列表渲染wx:for="{{}}"，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为item

      <view wx:for="{{array}}">
        {{index}}: {{item.message}}
      </view>

五、事件绑定

• （1）在组件中绑定一个事件处理函数。：bind:事件名
  • 如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

    <viewbindtap="tapName"> Click me! </view>

• （2）小程序绑定的函数无法传参，需要data-xxx自定义属性，通过event.currentTarget.dataset.xxx

• （3）小程序使用bind绑定事件会有事件冒泡，使用catch来绑定事件可阻止事件冒泡

六、路由

1、页面路由配置

• 在app.json文件的"pages"中配置

  "pages": [
      "pages/index/index",
      "pages/logs/logs",
  ]

2、导航

• （1）普通页面跳转：<navigator></navigator>

   <navigator url="/pages/index/index">跳转到新页面</navigator>

• （2）tabBar页面跳转：添加属性open-type="switchTab"

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

• （3）JS：普通页面跳转

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

• （4）JS：tabBar页面跳转

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

七、页面传参

• （1）传参方式：通过url进行传参，使用？问号携带参数
  • 标签方式

     <navigator url="/pages/index/index?id=123">跳转到新页面  </navigator>
  

  • JS方式

      wx.navigateTo({
        url: '/pages/index/index?id=123'
      })
  

• （2）接收参数：在目标页面的onLoad生命周期中接收传过来的参数

        onLoad: function (options) {
              console.log(options.id)  // id=123
        }

• （3）页面传参传对象：小程序不支持直接传递对象，需要将对象先转换成JSON数据，然后再在接收页面转换成原来的数据类型
  • 传送方

      let dataStr = JSON.stringify(data);
        wx.navigateTo({
        url: `/pages/index/index?dataStr=${data}`
      })
  

  • 接收方

         onLoad: function (options) {
             let data = JSON.parse(options.dataStr)
         }
  

八、数据缓存

• （1）存

    try {
        wx.setStorageSync('key', 'value')
    } catch (e) { }

• （2）取

    try {
        var value = wx.getStorageSync('key')
    } catch (e) { }

• （3）清除

    try {
        wx.removeStorageSync('key')
    } catch (e) { }

九、自定义组件