目录

准备工作

注意事项

使用vue-cli创建项目

 运行

---

准备工作

• 下载hbuild开发工具

HBuilderX-高效极客技巧

• 下载微信小程序开发工具

概览 | 微信开放文档

• uniapp

  uni-app官网

注意事项

1.node.js版本>=16#windows查看node版本
C:\Users\22862>node -v
v18.16.0

使用vue-cli创建项目

1.  进入项目文件夹

   • C:\dev\wechat

2.  使用vue-cli命令创建vite项目

   • npx degit dcloudio/uni-preset-vue#vite my-vue3-project

     注：网络不好，可以根据uniapp官网提示去gitee直接下载脚手架。

3. 安装依赖

   • #进项目目录
     cd shop-wx#执行
     npm install

4. Hbuilderx导入创建的项目
   • 

5.  配置小程序Appid 和微信开发者工具

   • 工具设置里面配置微信开发者工具，便于调试

     

   • manifest.js配置appid，使用组件，调用微信地址信息

6. 新建页面

   • 

7. 配置底部菜单

8. pages.json配置

   {"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}}, {"path": "pages/write/write","style": {"navigationBarTitleText": "发布","enablePullDownRefresh": false}}, {"path": "pages/unused/unused","style": {"navigationBarTitleText": "闲置","enablePullDownRefresh": false}}, {"path": "pages/buy/buy","style": {"navigationBarTitleText": "求购","enablePullDownRefresh": false}}, {"path": "pages/mine/mine","style": {"navigationBarTitleText": "我的","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","iconfontSrc": "static/iconfont.ttf","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/write/write","text": "发布"}, {"pagePath": "pages/unused/unused","text": "闲置"}]},"easycom": {"autoscan": true, //是否自动扫描组件"custom": { //自定义扫描规则"^uni-(.*)": "@/components/uni-$1.vue"}},"topWindow": {"path": "responsive/top-window.vue","style": {"height": "44px"}},"leftWindow": {"path": "responsive/left-window.vue","style": {"width": "300px"}},"rightWindow": {"path": "responsive/right-window.vue","style": {"width": "300px"},"matchMedia": {"minWidth": 768}}
   }

 运行