基于Vant的小程序入门记录

配置环境

安装小程序开发工具

不赘述，网上一堆，自己搜

创建一个小程序

• 选择测试账号
• js语言
• 创建

构建NPM

• 进入小程序所在的目录，打开cmd或者prowershell
• 输入 npm init
• 输入 npm i miniprogram-sm-crypto --production
• 剩下的按照这个做 https://youzan.github.io/vant-weapp/#/quickstart

Hello Word

构建NPM

在上一步中应该已经完成了构建NPM。
现在因该就能看到一个获取用户头像的页面了。

这个是我们需要看一下开发文档了

配置文档 & 基础语法

前提是有一定的vue和js的语法功底。

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

添加页面

添加一些页面吧，做一点页面样式，如下图

<!--pages/pop/index.wxml--> 
<cover-image class="bottom-15" src="/images/h1.jpg"></cover-image>
<van-skeleton title avatar row="2" />
<view class="order-title"><text>下单二维码</text></view>
<view class="order-title">
<image class="qrcode" mode="aspectFit" src="/images/qr.png"></image>
</view>

出错了

当添加了van-dropdown-menu 后就出现了wx.xxxxx不是function的错误。
这时不要慌，开发工具 详情 调试基础类库 换成最新的 搞定。

问题2

Notify vantweapp引入notify消息提示组件解决importpath/to/@vant/weapp/dist/notify/notify和‘selectComponent‘ of undefined

解决办法

重点 miniprogram_npm这个目录

import Notify from '../../miniprogram_npm/@vant/weapp/notify/notify';
Page({
  data: {},
  //btnSub是事件名
  btnSub() {
  	Notify({ type: 'success', message: '通知'});
  }
})

感谢：
https://blog.csdn.net/qq_44776950/article/details/107527557