配置环境
安装小程序开发工具
不赘述,网上一堆,自己搜
创建一个小程序
- 选择测试账号
- 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