微信小程序初始化NPM

npm init
node_modules
npm i miniprogram-sm-crypto --production
npm i @vant/weapp -S --production

修改 project.config.json

"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]

index.wxml

<view wx:if="{{isHide}}"><view wx:if="{{canIUse}}" ><view class='header'><image src='/images/微信.png'></image></view><view class='content'><view>申请获取以下权限</view><text>获得你的公开信息(昵称，头像等)</text></view><button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">授权登录</button></view><view wx:else>请升级微信版本</view>
</view>
<view wx:else><image class="circleImg" src='{{user.avatarUrl}}' mode='scaleToFill'></image>{{user.nickName}}<van-divider contentPosition="left">收支</van-divider></view>

Page({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。canIUse: wx.canIUse('button.open-type.getUserInfo'),isHide: false,user:{}},onLoad: function() {var that = this;// 查看是否授权wx.getSetting({success: function(res) {if (res.authSetting['scope.userInfo']) {wx.getUserInfo({success: function(res) {// 用户已经授权过,不需要显示授权页面,所以不需要改变 isHide 的值// 根据自己的需求有其他操作再补充// 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取codeconsole.log(res)that.setData({user: res.userInfo});wx.login({success: res => {// 获取到用户的 code 之后：res.codeconsole.log("用户的code:" + res.code);// 可以传给后台，再经过解析获取用户的 openid// 或者可以直接使用微信的提供的接口直接获取 openid ，方法如下：// wx.request({//  // 自行补上自己的 APPID 和 SECRET//  url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',//  success: res => {//   // 获取到用户的 openid//   console.log("用户的openid:" + res.data.openid);//  }// });}});}});} else {// 用户没有授权// 改变 isHide 的值，显示授权页面that.setData({isHide: true});}}});},bindGetUserInfo: function(e) {if (e.detail.userInfo) {//用户按了允许授权按钮var that = this;// 获取到用户的信息了，打印到控制台上看下console.log("用户的信息如下：");console.log(e.detail.userInfo);that.setData({isHide: false,user: e.detail.userInfo});//授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来} else {//用户按了拒绝按钮wx.showModal({title: '警告',content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',showCancel: false,confirmText: '返回授权',success: function(res) {// 用户没有授权成功，不需要改变 isHide 的值if (res.confirm) {console.log('用户点击了“返回授权”');}}});}}})

json

{"usingComponents": {"van-divider": "@vant/weapp/divider/index"}
}

css

.header {margin: 90rpx 0 90rpx 50rpx;border-bottom: 1px solid #ccc;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;}.circleImg{border-radius: 30px;width:60px;height:60px;
}.header image {width: 200rpx;height: 200rpx;}.content {margin-left: 50rpx;margin-bottom: 90rpx;}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;}

微信小程序初始化NPM相关推荐

微信小程序的npm使用心得
研究小程序的npm没多久,也就是稍微花了点时间研究了下,并记录一下我的理解和心得,有疏漏的地方,望各位指教. 首先,这里介绍的只囊括了如何使用npm,以及小程序npm基本的模块加载原理(没有太深入), ...
设置微信小程序支持npm（解决微信小程序npm构建时提示“没有找到可以构建的NPM包，请确认需要参与构建的npm都在miniprogramroot目录内，或配置project...”错误）的方法
提示:通过微信开发者工具创建小程序工程后,默认是不开启npm的,需要修改小程序npm配置参数,否则将会提示"没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 minipro ...
微信小程序使用npm 进行下载构建组价
1.进入小程序根目录构建前微信小程序目录使用npm 初始化命令进行初始化小程序目录 npm init -y 构建后的目录为构建完成后如何进行使用 {"usingComponents& ...
微信小程序使用 npm 包，举例图文详解
使用 npm 包前提条件: 下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述小程序使用 npm 包简述 1.初始化 package.json 2.勾选允许使用 npm(新版微信小程序 ...
微信小程序使用 npm 安装第三方包
微信小程序支持使用 npm 安装第三方包. 使用 npm: 在小程序根目录下执行 npm install 第三方包名安装 npm 包. 点击开发者工具中的菜单栏:工具 --> 构建 npm 完 ...
微信小程序腾讯云 mysql 初始_微信小程序初始化怎么处理？小程序服务器域名配置...
小程序初始化配置指引假如您已成功创建了小程序资源,需要对现有的资源进行一些简单配置后,才能让小程序跑起来未创建过资源的用户可以先在小程序控制台进行创建 1.配置微信小程序通信域名首先我们在小程序 ...
关于微信小程序安装npm的过程，从下载到小程序内部安装完成
1.先从官网下载nodejs 网站为Node.js (nodejs.org),选择左边第一个2 然后一直next,选默认就行选择自己喜欢的路径我的是D:\nodejs-v18.12.1 3 下载完成 ...
原生微信小程序引入npm和安装Vant Weapp
目录一.引入npm+安装Vant Weapp 1.引入npm 2.安装Vant Weapp 3.修改 app.json 4.修改 project.config.json 二.构建npm 一.引入np ...
微信小程序 - 使用npm（第三方包）
使用示例: 1. 开启"使用npm模块" 2. 新建 node_modules 文件夹 3. cd到新建 node_modules 所在的目录(非node_modules文件夹内) ...
微信小程序初始化 operateWXData:fail invalid scope
初学者开发微信小程序,可以使用云开发来进行微信小程序的开发. 第一次使用开发工具遇到的问题解决方案: 1.找到云开发 2.点击开通,选择合适自己的开发环境: 3.完成后,返回开发工具界面点击项目第一 ...

微信小程序初始化NPM

微信小程序初始化NPM相关推荐

最新文章

热门文章