微信小程序入门讲解

微信小程序


注册

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

项目结构

  • 微信小程序入门讲解
  • 微信小程序入门讲解

  • 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

导航

  • url=page
  • open-type:
    • 默认: navigateTo :非tabBar页面。
    • switchTab tabBar 页面。
    • navigateBack 返回
    • reLaunch 再运行
  • 编程导航: wx这个全局对象提供了一套 open-type对应值的api
    • wx.switchTab||navigateTo 注意区分非tabbar

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>

#### 样式

  • 尽可能使用class,组件可以指定它所在节点的默认样式,使用 :host 选择器

#### 使用插件

  • 进入官方后台添加插件,获取appid等信息
  • 进入app.json文件中配置plugins:{ "名":{ 相关信息 } }
  • 根据插件文档使用插件(有可能是组件) 需配置usingComponent

#### 登录

微信小程序入门讲解

微信小程序入门讲解

上一篇:【小程序】普惠节


下一篇:微信小程序之页面生命周期