前端笔记--微信小程序（原生）

介于工作需要，这里总结一下微信小程序的开发。

官网：微信小程序

开发文档：微信开放文档

vscode安装插件：

一. 目录结构及相关配置

‘

wxml 对应 html

wxss 对应 css

js 逻辑层 json 数据配置层

同样也是MVVM模型

1. 全局配置

（1）app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

pages：该项目的所有页面，字符串对应文件路径，但是不要加后缀名。

我们可以通过在这里添加页面让微信小程序自动帮助我们生成对应的文件目录。（必须使用微信开发者工具才行）

数组中的第一项表示默认打开的页面。

windows 全局窗口默认配置 （全局配置 | 微信开放文档）

就是什么标题，背景颜色，导航栏等等。

 比如开启一个下拉刷新（都在开发文档里）

topBar 导航，也配置在该文件中 （全局配置 | 微信开放文档）

  "tabBar": {
    "list": [
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },

参数一：文件路径

参数二：文字

参数三：未选择图标

参数四：选择图标

2. 页面单独配置

就是这个文件

可以为每个页面配置单独的配置项，和app.json中window那个一样。 

{
  "usingComponents": {},
  "navigationBarTitleText":"家园"
}

3. 发布时的页面索引优化（sitemap 配置 | 微信开放文档）

注意以上配置操作建议都在微信开发者工具中完成，会有提示说明，但是开发页面逻辑时可以使用vscode，也可以使用微信开发者工具。

 二. 模板语法

1. 数据绑定

wxml （和vue的一样）

<!--pages/Home/Home.wxml-->
<!-- text就是span view就是div -->
<!-- <text>pages/Home/Home.wxml</text> -->
<view class="main">
    <text>{{user}}的家园</text>
    <checkbox style="margin-left: 10px;" checked="{{isChecked}}"></checkbox>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    user:"Chen",
    isChecked:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

同时也可以双向绑定

<input model:value="{{value}}" />

2. wx:for

<!--pages/Home/Home.wxml-->
<!-- text就是span view就是div -->
<!-- <text>pages/Home/Home.wxml</text> -->
<view class="main">
    <text style="color: blue;">{{user}}的家园</text>
    <checkbox style="margin-left: 10px;" checked="{{isChecked}}"></checkbox>
    <view style="text-align:center;">
        <h1>来访游客</h1>
        <!-- 普通数组可以使用wx:key="*this" 只用一层循环可以省略item和index在标签中 -->
        <view class="customr-item" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
            name：{{item.name}}---index：{{index}}
        </view>
    </view>
</view>

3. block标签 

最终渲染不会展示，说白了就是vue的<template>。为了避免多余的div

这里是循环的使用用来作占位。

4. 条件渲染

        <h1 wx:if="{{isChecked}}">来访游客</h1>
         <!-- <h1 hidden="{{isChecked}}">来访游客</h1> -->

wx：if 和vue的v-if一样，是否展示，否的话会直接销毁  （一般使用）

对应的还有 wx：elif  就是else if

hidden 是 true的话是通过修改display：none来隐藏的     （如果频繁切换使用）

5. 事件绑定

<!--pages/Search/Search.wxml-->
<view>
    <input class="search-input" type="text" bindinput="handleInput" />
    <button bindtap="addStr" data-operation="*">修改为*</button>
    <view>{{SearchValue}}</view>
</view>

bind--   绑定事件 然后将事件写在 js中  如果需要默认传参 就是用

data-xxx  xxx是自定义的名字

// pages/Search/Search.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        SearchValue:""
    },
    handleInput(e){
        this.setData({SearchValue:e.detail.value})
    },
    addStr(e){
        const data=e.currentTarget.dataset.operation
        this.setData({SearchValue:data})
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

三. 样式

1. rpx

不管是什么机型。什么宽度。都是750rpx， 也就是说这是一个适配单位，类似vw。

可以使用计算属性来完成px到rpx转化

    width:calc(200rpx*2);

样式同样支持导入

/* pages/My/My.wxss */
@import "../../styles/common.wxss";
@color:yellow;
text{
    color:@color;
}

2. 定义全局样式变量

在app.wxss中

/**app.wxss**/
page,view,text,image,navigator{
    margin: 0;
    padding: 0;
}
page{
    /* 定义主题颜色 */
    --theme-color:red;
    /* 使用的方法就是在需要使用的页面的css中 */
    /* color: var(--theme-color); */
    --font-size:40rpx;
}

3. 使用less（vscode）

在原生框架中使用less。

安装该插件

加上这一段 就ok了。

 然后就可以将wxss修改为less

 3. 标签

（1）view标签

相当于div标签，还有一些基本配置。

view | 微信开放文档

（2）text标签

text | 微信开放文档

使用了text标签才可以实现我们的那个长按复制的效果

<text user-select="true">pages/My/My.wxml</text>

（3）image标签

和以前的也差不多

两个重要属性

mode  图片展示模式

lazy-load 懒加载

  <image lazy-load="true" 
  style="width: 400rpx; height: 600rpx;" 
 src="../../icons/water.png" 
 mode="aspectFit">
</image>

image | 微信开放文档

这里有个坑就是所有图片必须使用英文名，不然在开发者工具可以看到展示，但是在手机上就会看不到。

（4）swiper 轮播图

swiper | 微信开放文档

	<swiper
	 autoplay="true"
	 indicator-dots="true"
	 indicator-color="white"
	 indicator-active-color="blue"
	>
		<swiper-item>
			<image class="img-item" src="{{imgs.img1}}" mode="aspectFit" />
		</swiper-item>
		<swiper-item>
			<image class="img-item" src="{{imgs.img2}}" mode="aspectFit" />
		</swiper-item>
		<swiper-item>
			<image class="img-item" src="{{imgs.img3}}" mode="aspectFit" />
		</swiper-item>
	</swiper>

（5）navigatior 其实就是a标签

navigator | 微信开放文档

是block元素

默认但是不能跳到tabBar上配置的页面，需要修改open-type属性

（6）富文本  rich-text

其实就是v-html 将字符串解析为html。也可以将对象解析为html（看文档就行）

rich-text | 微信开放文档

 <rich-text nodes="<h1>我的信息</h1>"></rich-text>

（7）button

button | 微信开放文档

这个button有很多厉害的属性

(8)icon 图标

icon | 微信开放文档

(9）radio checkbox 单选框和复选框

四. 自定义组件

1. 创建

使用微信开发者工具点击创建component

这里的js会变成component而非pages

// components/Tabs/Tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

2. 声明组件在哪里使用

比如我在search中使用

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

3. 使用组件

<!--pages/Search/Search.wxml-->
<view>
    <input class="search-input" type="text" bindinput="handleInput" />
    <button type="primary" bindtap="addStr" data-operation="*">修改为*</button>
    <view>{{SearchValue}}</view>
    <Tabs></Tabs>
</view>

4. 组件方法要写在methods中，这个就和vue2一模一样了

// components/Tabs/Tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        tabs: [
            { id: 1, title: "首页", isActived: false },
            { id: 2, title: "详情", isActived: false },
            { id: 3, title: "帮助", isActived: false }
        ]
    },
    /**
     * 组件的方法列表
     */
    methods: {
        selectTitle(e) {
            const { index } = e.currentTarget.dataset
            let  tabs  = JSON.parse(JSON.stringify(this.data.tabs))
            tabs.forEach((v, i) => {
                i === index ? v.isActived = true : v.isActived = false
            });
            this.setData({ tabs })
            console.log(this.data);
        },
    }
})

5. 父子传参

父里面和另外几个框架一模一样

   <Tabs father="search"></Tabs>

子组件接收要在js中声明

 properties: {
        father:{
            type:"String",
            value:""
        }
    },

type类型，value默认值

6. 子传父

还是一样，通过事件

父

<Tabs father="search" bind:getSelectTitle="getSelectTitle" />

绑定事件

然后在js中声明回调

 getSelectTitle(e){
        this.setData({selectValue:e.detail})
    },

子

触发事件，携带参数

this.triggerEvent("getSelectTitle", title)

7. 组件插槽 slot

同vue 占位符

8. 其他属性

一些重要的比如 observer 监听数据变化

还有一些生命周期的钩子

自定义组件 | 微信开放文档

五. 生命周期

1. 应用生命周期，只针对app.js

默认代码

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

各个周期说明

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onshow是切出去再切回来都会触发

onError用来收集错误信息发送给后台

2. 页面生命周期

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

六. 常用api

 1. 网络请求

wx.request

RequestTask | 微信开放文档

   wx.request({
            url: 'http://127.0.0.1:8000/test',
            data: {
                SearchValue: this.data.SearchValue
            },
            success: function (res) {
                console.log(res);
            }
        })

需要添加白名单 否则会说无权限，当然开发过程中可以直接勾选这个选项避免检测

 添加白名单的位置

小程序

2. 本地存储

数据缓存

wx.setStorageSync(string key, any data) | 微信开放文档

可以利用该存储做一个接口缓存

在接口中保存数据

   wx.request({
            url: 'http://127.0.0.1:8000/init',
            success: (res) => {
                this.setData({ init: res.data })
                wx.setStorageSync('init', { data: res.data, time: Date.now() })
            }
        })

请求时进行判断

    let init = wx.getStorageSync('init')
        if (!init) {
            this.initData()
        } else {
            if (Date.now() - init.time > 1000 * 10) {
                this.initData()
            } else {
                this.setData({ init: wx.data })
            }
        }

这样就可以避免重复请求

3 . 权限问题

对于不同api的调用，需要权限设置的可以先检测权限问题，如果权限关闭就引导用户自己打开权限。

例如获取收货地址等。

关于权限获取和设置

wx.getSetting(Object object) | 微信开放文档

wx.openSetting(Object object) | 微信开放文档

4. 支付问题

只有企业账号才可以完成支付接口。文章来源地址https://www.toymoban.com/news/detail-503363.html

到了这里，关于前端笔记--微信小程序（原生）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！