微信小程序使用npm包

这篇具有很好参考价值的文章主要介绍了微信小程序使用npm包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 使用npm包

目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用
npm包有如下3个限制:

  1. 不支持依赖于Node.js内置库的包
  2. 不支持依赖于浏览器内置对象的包
  3. 不支持依赖于C++插件的包

2. npm-Vant Weapp

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是
MIT开源许可协议,对商业使用比较友好。

在小程序项目中,安装Vant组件库主要分为如下3步:

  1. 通过npm安装(建议指定版本为@1.3.3)
  2. 构建npm包
  3. 修改app.json

安装

项目目录启动shell终端

# 初始化 package.json 包管理配置文件
F:\wxapplet\mp_05>npm init -y
{
  "name": "mp_05",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
# 安装vant/weapp 包,这里指定了1.3.3版本
F:\wxapplet\mp_05>npm i @vant/weapp@1.3.3 -S --production

完成上述步骤后,在小工具中通过工具->构建npm

防止样式冲突,删除app.js 下的 v2

详细的操作步骤,大家可以参考Vant官方提供的快速上手教程:

使用

安装完Vant组件库之后,可以在app.json的usingComponents节点中引入需要的组件,即可在wxml中
直接使用组件。示例代码如下:

// app.json
"usingComponents":{
	"van-button":"@vant/weapp/button/index"
}

//页面的.wxml结构
<van-button type="primary">按钮</van-button>

CSS变量

Vant Weapp使用CSS变量来实现定制主题。关于CSS变量的基本用法,请参考MDN文档

用vscode来写个例子:

<!--vsprojects\mp_05\test\01.html-->
<style>
    /*这里使用html,是说网页根节点下所有地方都能引用该变量,也可以使用特定class定义范围*/
    html{
        /*定义CSS变量*/
        --main-color:#C00000;
    }
    .box1, .box2{
        /*background-color:#C00000;*/
		background-color:var(--main-color);
    }

    .box3{
        /*color:#C00000;*/
		color:var(--main-color);
    }

</style>

回到我们的微信小工具,可以参考定制主题 - Vant Weapp (youzan.github.io)获取相应的css变量

/*app.wxss*/
/*小工具的根节点是page,类比html节点*/
page{
   /*定制警告按钮的背景颜色和边框颜色*/
	--button-danger-background-color:#C00000;
	--button-danger-border-color:#D60000: 
}

3. npm-API Promise化

基于回调函数的异步API的缺点:

  • 默认情况下,小程序官方提供的异步AP!都是基于回调函数实现的,例如,网络请求的AP!需要按照如下的方
    式调用:

    wx.request({
        method:'',
        url:'',
        data:{},
        success:()=>{},//请求成功的回调函数
        fa11:()=>{},//请求失败的回调函数
        complete:()=>{}//请求完成的回调函数
    })
    
  • 缺点:容易造成回调地狱的问题,代码的可读性、维护性差!

API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步API,升级改造为基于Promise的异步APl,从而提高代码的可读性、维护性,避免回调地狱的问题。

实现

在小程序中,实现API Promise化主要依赖于miniprogram-api-promise这个第三方的npm包。它的安装
和使用步骤如下:

# 建议指定版本号
npm install --save miniprogram-api-promise@1.0.4

安装后,先把项目目录下的miniprogram_npm目录删除掉,再通过小工具中工具->构建npm去配置

// 在小程序入口文件中(app.js),只需调用一次promisifyAll()方法,
// 即可实现异步API的Promise化

// 使用es6按需导入
import promisifyAll from 'miniprogram-api-promise'

// 定义个空白对象,并赋值给了wx的自定义属性p
const wxp wx.p ={}

// promisify all wx's api
promisifyAll(wx,wxp)

调用promise化后的异步API

//页面的 wxml 结构
<van-button type="danger"bindtap="getInfo">vant</van-button>

//在页面的 js 文件中,定义对应的tap事件处理函数
async getInfo(){
    // 把服务器data属性重命名为res
    const {data:res } = await wx.p.request({
        method:'GET',
        url:'https://www.escook.cn/api/get',
        data:name:'zs',age:20
    })
	console.log(res)
},

4. 全局数据共享

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有:VueX、Redux、MobX等。

在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中:

  • mobx-miniprogram用来创建Store实例对象
  • mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用

安装

在项目中运行如下的命令,安装MobX相关的包:

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,重新构建npm。

下面以store.js为例说明下用法:

创建store

// store\store.js

// es6按需导入action,observalbe 方法
import { action, observable } from 'mobx-miniprogram'
// es6按需导出 store 方法
export const store = observable({
  // 数据字段
  numA: 1,
  numB: 2,
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  // actions 方法,用来修改store 找那个的数据
  updateNum1: action(function (step) {
    this.numA += step
  }),
  updateNum2: action(function (step) {
    this.numA += step
  })
})

绑定store的成员

// pages/message/message.js

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({

  // 绑定store的成员到当前页面
  onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },


  onUnload() {
    this.storeBindings.destroyStoreBindins()
  },

})

在页面中使用store中的成员

// pages/message/message.js

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({

  data: {

  },

  btnHandler1(e){
    console.log(e)
    this.updateNum1(e.target.dataset.step)
  },

  // 将store的成员绑定到当前页面
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['numA', 'numB', 'sum'],
      actions: ['updateNum1']
    })
  },
 
  onUnload() {
    this.storeBindings.destroyStoreBindins()
  },

})
<!--pages/message/message.wxml-->

<view>{{numA}}+{{numB}}={{sum}}</view>
<!-- 通过data-step给按钮step绑定数据 -->
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA-1</van-button>

注:上面代码中 data-step可以参考基础组件 | 微信开放文档 (qq.com)中的公共属性data-*

将store中的成员绑定到组件中

// components/numbers/numbers.js

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({

  // 通过 storeBindingsBehavior 实现与组件的绑定
  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store,
    // 指定要绑定的字段数据
    fields: {
      numA: ()=>store.numA, 		// 绑定字段第1种方式
      numB: (store)=>store.numB,	// 绑定字段第2种方式
      sum: 'sum',					// 绑定字段第3种方式
    },
    // 指定要绑定的方法
    actions: {
      updateNum2: 'updateNum2'
    }
  },
})

在组件中使用store中的成员文章来源地址https://www.toymoban.com/news/detail-616074.html

<!--components/numbers/numbers.wxml-->

<view>{{numA}}+{{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>
// components/numbers/numbers.js

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Component({

  behaviors: [storeBindingsBehavior],

  storeBindings: {
    store,
    fields: {
      // 组件自定义的名字 :'store中定义的成员'
      numA: () => store.numA,
      numB: (store) => store.numA,
      sum: 'sum',
    },
    actions: {
      updateNum2: 'updateNum2'
    }
  },

  methods: {
    btnHandler2(e) {
      console.log(e)
      this.updateNum2(e.target.dataset.step)
    }
  }
})

到了这里,关于微信小程序使用npm包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Burp Suite抓包微信小程序、网页数据实践

    上一个章节记录了破解版的Burp Suite的安装与环境配置,这章节记录一下使用Burp Suite实操抓包微信小程序与网页的数据信息。想了解如何安装配置Burp Suite,可以看一下我上一个章节的文章。 1.开启Burp后,点击【Proxy】然后选择其中的【Options】选项,在Proxy Listeners配置中增加适

    2024年02月05日
    浏览(38)
  • 如何在微信小程序里面使用npm安装第三方插件(以安装vant ui为例)

    1.在cmd里或者是终端里,找到对应的项目,并执行下面的命令,用来初始化package.json文件。 2.勾选下图选项 3.执行下面的命令安装vant ui 然后你会发现多了一个node_modules文件, 里面存的就是第三方组件。 4.最后一步,每次安装完一个新的第三方插件都要执行“构建npm” 执行完

    2024年02月14日
    浏览(63)
  • 通过Fiddler模拟器抓包微信小程序(适用APP)

    下载模拟器 准备抓包软件(fiddler或者Charles) fiddler设置 (1)打开设置:Tools-Options (2)点击Connections,设置端口和勾选第二个选项 (3)点击HTTPS,勾选前三个选项,下载证书 4、模拟器设置(夜神模拟器) (1)开启root权限 (2) 打开模拟器wlan设置 (长按连接的无线) 5、

    2023年04月18日
    浏览(49)
  • 夜神模拟器抓包微信小程序(进入浏览器,弹出安全警告(安全证书有问题解决方法)

    1. 声明:本文仅限学习研究讨论,切忌做非法乱纪之事! 即使按照其它教程的安装证书,也只是把证书安装到了用户下面,然而安卓高版本(7.0)之后呢,app可以只信任指定证书和系统内置的证书,后续用户安装的证书是不生效的。(如果你已经安装到用户下面了,弹出安全

    2024年02月07日
    浏览(127)
  • 微信小程序使用npm包

    目前,小程序中已经支持使用npm安装第三方包,从而来提高小程序的开发效率。但是,在小程序中使用 npm包有如下3个限制: 不支持依赖于Node.js内置库的包 不支持依赖于浏览器内置对象的包 不支持依赖于C++插件的包 Vant Weapp Vant Weapp是有赞前端团队开源的一套小程序UI组件库

    2024年02月15日
    浏览(40)
  • 微信小程序npm安装,保姆级图文教程,步骤齐全

    Download | Node.js   下载node.js 点击.msi程序安装; 随便安装路径(尽量避免中文)只要安装的是电脑上就行,记住安装路径(这个环境变量是自动配置的)(.zip需要手动配置环境变量) .zip包,随便解压路径(尽量避免中文)只要安装的是电脑上就行,记住安装路径(这个环境变

    2024年02月07日
    浏览(46)
  • 微信小程序【构建npm】使用记录

    :: 问题 使用原生微信小程序开发时,通过官方 typescript 模板构建的小程序无法正确执行 构建npm 成功,从而导致我想通过 npm 安装并使用第三方库出现问题 :: 开发环境(可参照) 设备 : macOS Ventura 13.0 微信开发者工具 : Stable 1.06.2303060 创建模板 : typescript + sass 【这里使用的

    2024年02月11日
    浏览(45)
  • 微信小程序中使用 npm 包

    在微信小程序中使用npm包,需要进行以下步骤: 确保你的小程序开发工具的版本号高于v1.02.1808300,因为这个版本之后的小程序开发工具已经支持使用npm包。 小程序根目录下执行npm init,然后一直回车,会在根目录下生成package.json文件。 终端切换到小程序根目录,使用npm in

    2024年02月11日
    浏览(33)
  • 微信小程序使用npm引入三方包详解

    1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。 2 微信小程序npm环境搭建

    2024年02月11日
    浏览(53)
  • 微信小程序使用 npm 包,举例图文详解

    下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述 1、初始化 package.json 2、勾选允许使用 npm(新版微信小程序开发工具忽略这一步) 3、下载 npm 包 4、构建 npm 不清楚的可以往下看详解 1、初始化 package.json 在小程序开发工具\\\"终端\\\"输入: 执行命令成功后自动

    2023年04月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包