微信小程序入门讲解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

微信小程序

注册

由于发文限制，请自行到微信公众平台注册

项目结构

project.config.json 配置文件（不需要动）
app.json（用户配置）
- 路由pages
- window 整个程序样式
- tabar底部设置
- .....
app.js 入口程序

xxx.js

app.js是入口程序，代表应用要做的事
通过路由切换到了index.js中
Page(options)
- data 属于页面的数据
  - this.data.xxx
- onLoad: 获取路由参数 , onLoad(options.xxx)
- onReady: 更改页面数据,比如改title
- onShow: 多次触发，切换页面的时候
- onHide: 多次触发
data初始化数据
onReady 修改数据
- this.setData({ msg:'xxx'})
- 修改并更新视图

常用组件

view视图
text文本框
picker 选择列表
input组件(无法使用font-family)
- 通过bind事件(全小写)，来绑定对应js中声明的函数,赋值赋函数引用
- input bindblur="函数名"
- 在函数内部，接受e这个对象
  - e.detail.value 获取value值
  - e.target.id 元素id
  - e.target.dataset 获取元素上的属性 data-xxx

wx指令

在页面中 wx-xxx
wx:if="" 是否显示
wx:for=""
wx:for="{{数组}}"
- 元素:{{item}} 索引 {{index}}
条件 wx:if="{{布尔值}}" 相邻 wx:elif="{{布尔值}}" 相邻 wx:else

事件

change 改变事件
tap 点击事件
bindblur 离焦
bindconfirm 回车
bindinput 键入
checkbox-group 包裹checkbox 获取的detail.value是一个数组
表单
- button的formType
  - submit
  - reset

发请求

wx.request( options)
- url
- success
- fail
- complete

引入资源

html导入

<include src=""/>

js导入

<wxs src="./../test/test.wxs" module="test"/> 相对路径

<view>

  {{test.name}}

</view>

css导入 @import "common.wxss";

路由参数 :

onLoad: function(option){

    console.log(option.query)

  }

图片预览wx.preview
本地存储 wx.setStorageSync

上拉下拉

上拉和下拉的操作需要触发，必须js文件中，声明其对应的回调函数
- 下拉函数 onPullDownRefresh -> 需要配置xxx.json
  - enablePullDownRefresh:true
- 上拉触底 onReachBottom
- 停止下拉的函数 wx.stopPullDownRefresh()
以上函数可以通过Page构造编辑器自动输出,单页面属性参考配置window

tabbar

color selectedColor 对于整个tabbar的设置
iconPath selectedIconPath 每个不同的单独设置

有趣的功能

播放下载音乐

const innerAudioContext = wx.createInnerAudioContext()

      innerAudioContext.autoplay = true

      innerAudioContext.src = res.tempFilePath

      innerAudioContext.onPlay(() => {

        console.log('开始播放')

      })

      innerAudioContext.onError((res) => {

        console.log(res.errMsg)

        console.log(res.errCode)

      })

弹幕

<view class="section tc">

  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"   enable-danmu danmu-btn controls></video>

  <view class="btn-area">

    <button bindtap="bindSendDanmu">发送弹幕</button>

  </view>

</view>

bindSendDanmu() {

    this.data.videoContext.sendDanmu({

      text: '6666',

      color:'#00b26a'

    })

  },

 onReady: function () {

    this.data.videoContext = wx.createVideoContext('myVideo')

  },

查找元素

const query = wx.createSelectorQuery();

     //        定义选择器，查找元素位置

query.select('#bottom').boundingClientRect()

query.exec(ele=>ele);

引入资源

html导入

<include src=""/>

js导入

<wxs src="./../test/test.wxs" module="test"/> 相对路径

<view>

  {{test.name}}

</view>

css导入 @import "common.wxss";

路由参数 :

onLoad: function(option){

    console.log(option.query)

  }

图片预览wx.preview
本地存储 wx.setStorageSync

上拉下拉

上拉和下拉的操作需要触发，必须js文件中，声明其对应的回调函数
- 下拉函数 onPullDownRefresh -> 需要配置xxx.json
  - enablePullDownRefresh:true
- 上拉触底 onReachBottom
- 停止下拉的函数 wx.stopPullDownRefresh()
__以上函数可以通过Page构造编辑器自动输出,单页面属性参考配置window

组件

创建一个compoment
配置其.json文件 component:true
在使用组件的.json文件中定义
- usingComponents:{ 名:路径}
在使用组件的页面使用名

接收数据

properties: {

    text:{

      type:Number,

      value:888

    }

  }

组件wxml的slot

在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。

默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

  properties: { /* ... */ },

  methods: { /* ... */ }

})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

<!-- 组件模板 -->

<view class="wrapper">

  <slot name="before"></slot>

  <view>这里是组件的内部细节</view>

  <slot name="after"></slot>

</view>

使用时，用 slot 属性来将节点插入到不同的slot上。

<!-- 引用组件的页面模板 -->

<view>

  <component-tag-name>

    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->

    <view slot="before">这里是插入到组件slot name="before"中的内容</view>

    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->

    <view slot="after">这里是插入到组件slot name="after"中的内容</view>

  </component-tag-name>

</view>