113- 微信原生小程序开发

谁家好人学前端啊
267 阅读7分钟

一、项目搭建和启动

1.1 新建项目

  • 在微信开发工具的启动页新建项目：

1.2 项目架构

  • pages:所有的页面文件
  • utils:所使用的第三方的工具文件。自带时间字符串格式文件
  • eslintrc.js:指JavaScript语法检查工具eslint的配置文件，用于检查语法错误
  • app.js:全局文件。用于声明整个小程序所使用的全局变量和函数以及应用生命周期函数，其中 globalData就存放者全局变量。
  • app.json:全局项目的配置文件。主要用于tabbar、窗口样式、页面注册等配置，类似于uniapp的pages.json
  • app.wxss:全局的css文件，wxss理解为微信版的css，书写跟普通css没有任何区别
  • project.config.js:项目插件配置文件。还有一个私有的配置文件project.private.config.js
  • sitemap.json:规定小程序页面的搜索权重

1.3 运行项目

  • 点击工具栏中的编译按钮即可完成启动或重新启动

二、页面开发

2.1 新建页面

  • 概念：点击文件新建页面或采用快捷方式新建页面

  • 快捷新建页面

    • 在app.json中的pages数组中直接添加新页面的地址，小程序会自动识别并新建页面对应的4个文件。

  • 每个页面的组成

    • 由4个文件构成

      • wxml：存放该页面的定制html标签
      • wxss：微信页面的样式代码
      • js：存放页面的交互以及生命周期等所有js代码
      • json：针对该页面的配置文件，优先级高于app.json.比如设置页面标题、导航栏样式、启动下拉刷新等

    • 样式开发

      • 只推荐使用class选择器来进行样式开发

      • sass支持

        • 默认小程序是不带scss支持，微信小程序提供的插件库也没有scss。但是微信小程序的插件和vscode的插件是兼容的，小程序可以直接引入vscode已安装的插件。

        • 小程序引入scss

          • 点击小程序的扩展按钮导入vscode的已安装扩展

            img

          • 2.修改setting.json，完成easy sass的配置代码，将scss文件转为wxss文件

            img

            "easysass.formats": [
    {
        "format": "expanded",
        "extension": ".wxss"
    }
],

2.2 页面配置

  • 概念：关于页面配置 代码写在app.json中

  • 内容

    • 页面配置
    • 页面窗口配置
    • Tabbar配置

  • 页面配置

    • pages数组中完成页面配置。第一项仍是启动页面,为页面地址,如果书写地址不存在，会自动新建对应的文件件以及4个组成文件

      {
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ]
}

  • 窗口配置

    • 在app.json中的Window属性完成导航栏配置。为所有页面默认样式，每个页面单独配置可以在页面的json文件中进行配置

    • 文档：developers.weixin.qq.com/miniprogram…

      "window": {
    //导航栏文字颜色
    "navigationBarTextStyle": "black",
    //是否取消头部的导航栏，default是不取消
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页",
    "navigationBarBackgroundColor": "#fff"
  },

  • Tabbar配置

    • app.json中的tabbar属性完成配置，跟uniapp是一样的。

      "tabBar": {
    "color": "black",
    "backgroundColor": "white",
    "selectedColor": "#1cb3fb",
    "list": [
      {
        "iconPath": "/assets/icons/home.png",
        "selectedIconPath": "/assets/icons/home_selected.png",
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "iconPath": "/assets/icons/order.png",
        "selectedIconPath": "/assets/icons/order_selected.png",
        "pagePath": "pages/order/order",
        "text": "点单"
      },
      {
        "iconPath": "/assets/icons/map.png",
        "selectedIconPath": "/assets/icons/map_selected.png",
        "pagePath": "pages/map/map",
        "text": "门店"
      },
      {
        "iconPath": "/assets/icons/mine.png",
        "selectedIconPath": "/assets/icons/mine_selected.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }

  • 静态资源

    • 小程序默认没有带静态资源文件夹，可以自己新建一个表示静态资源文件夹，一般为assets或static文件夹，都可以

三、数据交互

3.1 wx:if

  • 概念：就相当于vue 的v-if指令，实现判断指定条件渲染不同标签

  • 语法

    <view wx:if="{{num >10}}">{{num}}大于10</view>
<view wx:elif="{{num >0}}">{{num}}大于0</view>
<view wx:else>{{num}}小于等于0</view>

3.2 页面数据

  • 概念：需要再页面的js文件里书写页面要使用的数据，在js里的data属性中书写页面要使用的数据

  • 语法

    Page({
  /**
   * 页面的初始数据
   */
  data: {
    num:5
  }
})

  • 页面上利用胡子语法进行使用

    html:
<view>{{num}}</view>
js： 
this.data.num 进行使用

  • 修改页面的数据

    Page({
    data:{
        num:5
    },
    onLoad(){
        this.setData({
            //原来基础上加1
            num:this.data.num+1
        })
    }
})

3.3 wx:for列表渲染

  • 概念：利用wx:for实现列表渲染

  • 语法

    <view wx:for="{{arr}}" wx:key="item">{{item}}</view>

  • 特点

    • 默认情况下，小程序会将item和index直接注入到列表渲染中指向遍历的数据以及其下标。也可以通过wx:for-item以及wx:for-index来修改遍历数据以及下标的变量

3.4 block虚拟标签

  • 概念：<block>就相当于vue中的<template>作为一个虚拟标签进行使用，可以在虚拟标签上使用wx:for或wx:if.一般用于需要渲染多个同级标签时

  • 语法

    <block></block>

  • 例子：根据用户是否登录显示用户信息或登录按钮

四、请求处理

4.1 wx.request

wx.request({
    url:'请求地址',
    method:'get',
    data:{},
    header:{},
    success:(res)=>{
        console.log(res)
    }
})

五、事件处理

5.1 事件分类

touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断，如来电提醒，弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开,即点击
longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发，即长按1.5.0
longtap手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart会在一个 WXSS animation 动画开始时触发
animationiteration会在一个 WXSS animation 一次迭代结束时触发
animationend会在一个 WXSS animation 动画完成时触发
touchforcechange在支持 3D Touch 的 iPhone 设备，重按时会触发
滚动触发

5.2 事件的一般用法

  • 流程

    • 1.在标签上书写bind事情名="事件处理函数"用于指定标签的事件.其中tap为点击事件

      <view bindtap="clickEvent" data-num="1" data-数据名称2="数据2"></view>
      • data-数据名称=参数值，就相当于给事件函数传递参数

    • 2.在js文件中跟data同级别书写处理事件的函数。即自定义函数跟data是同级别

      Page({
    data:{},
    clickEvent(event){
        //可以拿到传递的数据{num:1}
        console.log('触发事件',event.currentTarget.dateset)
    }
})
      • 通过event.currentTarget.dateset拿到传递的数据

六、DOM以及用户交互反馈

6.1 DOM 交互

  • 跟uniapp一模一样，只需要将uni.createSelectQuery中的uni改成wx就ok了

6.2 用户反馈

6.2.1 加载动画

  • 语法

    wx.showLoading({
    title:'加载中'
})
wx.hideLoading();

6.2.2 消息弹窗

  • 语法

    wx.showToast({
    title:'加载成功',
    duration:2000
})
wx.hideToast();

七、生命周期

  • 跟uniapp完全一模一样，对于应用生命周期以及页面生命周期。

八、自定义组件

  • 概念：微信原生也提供了自定义组件的定义和使用语法。每个组件都有自己的 生命周期

8.1 创建自定义组件

  • 流程

    • 1.在components文件夹下新建一个新的文件节，作为一个组件的代码所在目录
    • 2.每个组件文件夹一样有4个组件文件
    • 3.组件.js书写的是Component()函数而非Page()，意味着该文件是一个组件而非页面

8.2 使用自定义组件

  • 流程

    • 1.在需要使用自定义组件 的页面.json中利用usingComponents来完成子组件的注册

      {
  "usingComponents": {
    "Tabbar":"/components/Tabbar/Tabbar"
  }
}

    • 2.在页面.wxml中使用自定义组件

      <Tabbar></Tabbar>

九、页面跳转和传参

  • 概念：跟uniapp的跳转和传参一模一样，只不过在api跳转时将uni改成wx即可。

十、腾讯地图

  • 在小程序中需要根据用户所在地址查询附近商家等操作，需要第三方地图的介入。微信小程序支持腾讯地图。

10.1 引入腾讯地图

10.1.1 申请腾讯地图密钥key

  • 在小程序中要使用腾讯地图需要再官方网站上申请密钥才能进行使用，类似于百度地图

  • 官方网站：lbs.qq.com/miniProgram…

  • 可以参考官方helloworld实例进行操作

    • 1.申请密钥key

      • 创建应用

      • 创建key

        • 绑定自己的appid以及勾选webservice api

    • 2.下载小程序sdk。1,2并解压将文件放入到小程序项目中，比如utils文件夹中

    • 3.按照官方例子在页面.js中引入js文件并调用接口进行测试

avatar
文章
阅读
粉丝