从零开始创建微信小程序

1. 打开微信开发者工具
2. 左上角点击项目，再点击新建项目
3. 第一行填写项目名称，第二行选择项目存储的位置，第三行可以先使用测试号，点击蓝色的测试号按照流程申请之后，填写测试号，第四行选择小程序开发模式，第五行选择不使用云服务，第六行模板选择选择最基础的 ‘js-基础模板’，确认创建小程序
4. 新建的小程序有很多文件夹和文件 其中

• ---

  components是用来存放组件的 鼠标右键会有新建components和page的选项，建议在components中选择新建components，pages文件夹里选择page，新建的页面或者组件都有4个文件 js结尾就相当于js，json文件是对于页面或者组件的一些配置，像按需引入类似的，wxml相当于html文件，wxss相当于css文件
• pages文件夹用来放置一个个页面，
• utils一般用来存放一些公共的方法，
• app.js是项目的入口文件,
• app.json文件是对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多工具栏（tabBar）等。
• app.wxss文件是一些全局配置
• project.config.json是针对项目的配置使用es6转es5，不检验域名，上传代码时自动压缩等等
• project.private.config.json 项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
• sitemap.json 关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

1. 新建一个页面login 需要在app.json配置pages/login/login在第一行，这样小程序进去第一个页面就是登录，将不需要的index文件夹可以删除掉了
2. 配置底部的导航栏在app.json文件里使用tabBar属性来配置底部导航栏

   //app.json文件中
   {
       
       "tabBar": {
       "color": "#a9b7b7", //未选中的文字颜色
       "selectedColor": "#D9001B", //选中的文字颜色
       "borderStyle":"white", //导航的上边框颜色
       "list": [  //导航栏
         {
           "pagePath": "pages/home/home", //路径
           "selectedIconPath": "images/home_select.png", //选中的图标
           "iconPath": "images/home.png", //未选中的图标
           "text": "首页" //导航栏的每个标题
         },
         {
           "pagePath": "pages/message/message",
           "selectedIconPath": "images/message_select.png",
           "iconPath": "images/message.png",
           "text": "消息"
         },
         {
           "pagePath": "pages/user/user",
           "selectedIconPath": "images/user_select.png",
           "iconPath": "images/user.png",
           "text": "我"
         }
       ]
     },
   }

   

3. 在小程序里引入其他的组件 ，比如vant-weapp组件 ，在项目中ctrl+j 调出终端 输入npm init 初始化，为什么初始化 是因为直接npm i <package名字> 不会下载成功 之后填写项目名称 其他的都可以默认 以上步骤完成之后直接npm i vant-weapp -S --production即可 这时候会生成一个node——modules文件夹，搜的很多教程在本地设置里都有构建npm选项 但是我现在的版本并没有这个选项 所以直接在工具里面选择构建npm即可出现下图的文件夹代表构建成功

4. 引入vant后可能出现样式没引入的bug我这里选择降低调试基础库就可以了，网上还有说删除app.json中的"lazyCodeLoading": "requiredComponents"属性 如果降低基础库解决不了可以试试