微信小程序学习笔记

青菜中的油渣
1,047 阅读3分钟

概述

微信小程序是微信推出的移动端应用。

常用的全局配置

在小程序项目根目录中的app.json文件中

  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#1890ff",
    "navigationBarTitleText": "应用名称",
    "navigationBarTextStyle": "white"
  },

常见的页面配置

在页面目录下的.json文件中

{
  "usingComponents": {},
  "navigationStyle": "custom",
  "backgroundTextStyle": "dark"
}

条件渲染/循环渲染/渲染文本

Page({
  data: {
    isShow: true,
    list: [{
      id: '1',
      value: 1,
    }, {
      id: '2',
      value: 2
    }],
    value: 'Hello world!',
    num: 999,
  },
})

<view wx:if="{{isShow}}">true</view>
<view wx:else>false</view>

<view wx:for="{{list}}" wx:key="id">
{{index}} - {{item.value}}
</view>

<view>{{value}}</view>
<view>{{num}}</view>

常用的样式选择器

小程序的选择器跟CSS差不多，最常用的还是类名、id、标签选择器。但小程序的标签选择器是它独有的标签，另外小程序也有页面选择器page，可以设置每一个页面的样式。需要注意的是，不同页面的.wxss文件相互隔离，即同一个选择器在不同的页面，作用于不同的标签。app.wxss文件中是共有的样式，所有页面都会作用到。

.container {
  color: #f00;
}
#wrapper {
  color: #fff;
}
view {
  color: orange;
}
page {
  background-color: #1890ff;
}

rpx单位

事件/传参/冒泡/非冒泡

Page({
  data: {
    name: "home",
  },
  route(e) {
    this.setData({
      name: e.target.dataset.name
    })
  }
})

<view data-name='home' bindtap="route">首页</view>
<view data-name="me" bindtap="route">我</view>

{{name}}

页面的生命周期

网络请求

地图/标记点

屏幕旋转

iconfont

图表库

动画

底部tabbar

检查更新

禁止页面被微信爬虫爬取

自定义组件

分包加载

worker

消息推送

微信登陆/获取手机号码

小程序分享给微信好友

跳回app

动态生成小程序二维码

数据分析/数据上报/腾讯移动分析

微信支付

权限设置页面

剪切板

打电话

扫码

登陆微信公众平台，使用邮箱注册一个微信小程序，获取 AppID。

下载并打开微信开发者工具，创建小程序，填入 AppID。

微信开放文档里面有小程序的开发文档。

WeUI 组件库

使用前需要在 app.json 中写入配置项

  "useExtendedLib": {
    "weui": true
  }

使用什么组件就在对应的页面 .json 文件中添加组件信息，或者在 app.json 中全局添加组件，这样所有页面都能用。

列表/列表项和可滑动列表项组件

    "usingComponents": {
      "mp-cells": "weui-miniprogram/cells/cells",
      "mp-cell": "weui-miniprogram/cell/cell",
      "mp-slideview": "weui-miniprogram/slideview/slideview"
    }

<mp-cells ext-class="cells" title="数据列表" footer="底部描述">
    <mp-cell value="标题文字" footer="说明文字"></mp-cell>
    <mp-cell link>
        <view>标题文字</view>
        <view slot="footer">说明文字</view>
    </mp-cell>
    <mp-slideview buttons="{{slideButtons}}">
        <mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
    </mp-slideview>
</mp-cells>

   slideButtons: [{
      text: '普通',
    },{
      text: '普通',
      extClass: 'test',
    },{
      type: 'warn',
      text: '警示',
    }],

上传组件

"usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
}

用法未完待续

提示框组件

"usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
}

<mp-dialog title="test" show="{{show}}" bindbuttontap="hideDialog" buttons="{{buttons}}">
        <view>test content</view>
</mp-dialog>
<button type="primary" bindtap="showDialog">click</button>

data:{
    show: false,
    buttons: [{text: '取消'}, {text: '确定'}],
}

  showDialog() {
    this.setData({
      show: true,
    })
  },
  hideDialog(e) {
    console.log('e', e.detail.index)
    this.setData({
      show: false,
  })
  },

只有一个按钮的提示框

    buttons: [{text: '确定'}],

结果页

    "usingComponents": {
      "mp-msg": "weui-miniprogram/msg/msg"
    }

<mp-msg type="success" title="操作成功">
        <view slot="desc">恭喜您操作成功，您将获得下方权益
        </view>
        <view slot="extend">
            <view>1. 说明1</view>
            <view>2. 说明2</view>
        </view>
        <view slot="handle">
            <button class="weui-btn" type="primary">主要操作</button>
            <button class="weui-btn" type="default">辅助操作</button>
        </view>
</mp-msg>

顶部提示框

    "usingComponents": {
      "mp-toptips": "weui-miniprogram/toptips/toptips"
    }

<mp-toptips msg="获取数据失败" type="error" show="{{show}}" delay="5000"></mp-toptips>
<button bindtap="click">click</button>

  click() {
    this.setData({
      show: true,
    })
  },

微信预览 PDF 等文件。

可以将 PDF 等文件放置在 微信云开发的云存储中，反正每个账号都有免费的额度。

    wx.downloadFile({
      url: 'http://test.pdf',
      success: function (res) {
        const filePath = res.tempFilePath
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打开文档成功')
          }
        })
      }
    })

swiper

swiper 的高度是有默认值的，在实际开发中可以覆盖掉

<swiper>
  <swiper-item>
    <view>1</view>
  </swiper-item>
  <swiper-item>
    <view>2</view>
  </swiper-item>
  <swiper-item>
    <view>3</view>
  </swiper-item>
</swiper>

swiper {
  height: 500px;
}
view {
  height: 500px;
  background-color: #eee;
}

横向滚动

<scroll-view scroll-x>
  <view>头条</view>
  <view>国内</view>
  <view>国外</view>
  <view>头条</view>
  <view>国内</view>
  <view>国外</view>
</scroll-view>

scroll-view {
  white-space: nowrap;
}

view {
  display: inline-block;
  padding: 24rpx;
}

文本可长按选中

<text user-select>Hello world!</text>

渲染富文本

<rich-text nodes="{{nodes}}"></rich-text>

data: {
    nodes: '<h1>Hello</h1>'
}

使用插件 在 app.json 中添加插件的配置信息

  "plugins": {
    "xmly-plugin": {
      "version": "3.1.3",
      "provider": "wxc6a13dda5815c529"
    },
    "WechatSI": {
      "version": "0.0.7",
      "provider": "wx069ba97219f66d99"
    }
  }

跳转到其他微信小程序 navigator

avatar
文章
阅读
粉丝