小程序开发-准备工作

（一）、小程序初学

1、下载微信开发者工具

稳定版 Stable Build 更新日志 | 微信开放文档

2、创建项目

3、新建页面

• 在app.json中新建页面
• 配置底部tab栏

{
"pages":[
    "pages/index/index",
    "pages/home/home",
    "pages/logs/logs",
    "pages/require/require",
    "pages/find/find",
    "pages/my/my",
    "pages/termini/termini",
    "pages/detail/detail",
    "pages/price/price",
    "pages/submit/submit",
    "pages/orderlist/orderlist",
    "pages/comego/comego",
    "pages/footmark/footmark"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "维拉度假",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#ff8200",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "img/icon/sy.png",
      "selectedIconPath": "img/icon/sying.png"
    }, 
    {
      "pagePath": "pages/require/require",
      "text": "提交需求",
      "iconPath": "img/icon/tj.png",
      "selectedIconPath": "img/icon/tjing.png"
    },
    {
      "pagePath": "pages/find/find",
      "text": "发现",
      "iconPath": "img/icon/fx.png",
      "selectedIconPath": "img/icon/fxing.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "img/icon/wd.png",
      "selectedIconPath": "img/icon/wding.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4、编写静态页面

        样式单位：rpx，小程序宽度为750rpx

        配置公共样式

        没有通配符选择器

        每一个页面，page相当于body，表示最外层

page{
    background-color: #f4f4f4;
}

5、导入公共样式、图标

• 在根目录新建style/iconfont.wxss，把图标的样式代码复制到iconfont.wxss里
• 在app.wxss中导入

@import './style/iconfont.wxss';

• 不检验合法域名：位置=>本地设置=>勾选“不检验合法域名”

<text class="iconfont icon-heart"></text>

 （二）、配置vant-ui库

1、安装插件

• 安装node.js（使用vant-ui库需提前安装node.js）
• vant-ui库官网：Vant Weapp - 轻量、可靠的小程序 UI 组件库
• 安装插件：调试器=>新建终端，执行

npm i @vant/weapp -S --production

• 修改app.json，去掉v2
• 构建npm包

2、使用组件

• 在app.json或index.json中引用组件

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

• 使用 

  <van-button type="default">默认按钮</van-button>
  <van-button type="primary">主要按钮</van-button>