小程序开发环境搭建 - 【畅游网络】

小程序开发环境搭建

2020-12-08 畅游网络

　　小程序开发有多种模式，比如微信官方模式，APICloud、uni-app等多端模式，鉴于目前多端模式并不成熟，需要踩坑无数，因此直接采用官方模式。小程序UI需要自己设计，为保证良好的界面效果，引入专为小程序开发的UI组件库Vant Weapp。开发可以使用自己熟悉的工具Sublime、VSCode，模拟器用微信开发者工具就可以了。

　　环境搭建

1、下载Vant Demo程序、微信开发者工具，并安装好开发工具（稳定版 Stable Build 1.03.2011120）
2、程序包中的vant-weapp/base/目录即为小程序Demo源码，在官方开发工具中新建项目，并导入Demo源码，在项目根目录下要新建一个构建文件生成目录‘miniprogram’，用于保存需上传、打包的组件库源码
3、在项目文件 package.json 所在的目录中执行“npm install”安装 npm 包
4、自定义构建npm，在项目根目录project.config.json中，设置‘setting.packNpmManually’为 true，设置‘packNpmRelationList’为[{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]
5、在微信开发者工具的菜单栏“设置 -> 项目设置 -> 本地设置”中勾选‘使用npm模块’，然后点击“工具 -> 构建 npm”，完成后，‘miniprogram’中就会出现需打包、上传的组件库源码
6、在项目根目录下新建custom-tab-bar目录，目录中新建文件index.js、index.json、index.wxml，以三个tabbar子项cart、goods、user为例修改文件：

“index.js”

Page({
data: {
    // 将tabbar需要的所有数据全部封装到tabbars对象中
    tabbars: {
      // tabbar所有的子项
      list: [{
        pagePath: "/pages/cart/index",
        text: "发现",
        icon: "search"
      }, {
        pagePath: "/pages/goods/index",
        text: "消息",
        icon: "envelop-o"
      }, {
        pagePath: "/pages/user/index",
        text: "用户",
        icon: "manager-o"
      }],
},
      // 当前活跃的tabbar子项
      active: null,
      // current: '关注',

},

onChange: function(event) {
// event.detail 的值为当前选中项的索引
console.log(event.detail);
const nextIndex = event.detail;

// 页面路由
wx.switchTab({
    url: this.data.tabbars.list[nextIndex].pagePath
});
}
});

“index.json”

{
"usingComponents": {
"van-tabbar": "../miniprogram/miniprogram_npm/@vant/weapp/tabbar/index",
"van-tabbar-item": "../miniprogram/miniprogram_npm/@vant/weapp/tabbar-item/index"
}
}

“index.wxml”

<cover-view>
<van-tabbar active="{{tabbars.active}}" bind:change="onChange">
<block wx:for="{{tabbars.list}}" wx:key="id">
<van-tabbar-item name="{{item.name}}" icon="{{item.icon}}">{{item.text}}</van-tabbar-item>
</block>
</van-tabbar>
</cover-view>

7、在每个tabbar调用页目录的index.js文件中，找到onLoad函数，在函数中添加以下代码，以激活当前tabbar标签（改变颜色），其中的CURRENT_ACTIVE_TABBAR，需根据当前标签在“app.json”文件的tabBar列表分别设置为“0、1、2”
    this.getTabBar().setData({
      "tabbars.active": CURRENT_ACTIVE_TABBAR
    });

8、在“app.json”文件中添加自定义组件配置

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#999999",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "pages/goods/index",
      "icon": "search"
    }, {
      "pagePath": "pages/cart/index",
      "icon": "envelop-o"
    }, {
      "pagePath": "pages/user/index",
      "icon": "manage-o"
    }]
},
"usingComponents": {
}

9、完成以上操作后，微信开发者工具的模拟器中应该就可以正常显示Demo了

　　Tabbar标签栏

引入Tabbar标签栏需要使用官方提供的“自定义 tabBar”，具体设置可参考这几篇文档：菜鸟读文档、自定义底部导航、ui组件库、tabBar组件开发、自定义tabbar方案