挑战2小时编程：撸了个微信小程序做私人网盘视频教程分享

通过Taro脚手架搭建项目

本人用React技术栈较多，用React开发极快，所以本次进行快速开发小程序挑战，就采用了Taro 3.x的开发框架（一套代码支持运行在H5、RN、微信/京东/百度/支付宝/头条/钉钉/企业微信/飞书小程序）。 Taro是京东出品的开源多端解决方案，市场上比较类似的多端解决方案还有uni-app，大家根据个人爱好使用。

Taro 3.x开发文档参考 https://taro-docs.jd.com/taro/docs/

快速开始

安装taro cli 脚手架

首先，你需要使用 npm 或者 yarn 全局安装 @tarojs/cli，或者直接使用 npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

值得一提的是，如果安装过程出现sass相关的安装错误，请在安装mirror-config-china后重试

npm install -g mirror-config-china

安装成功后，可以用npm info 或 taro -v查看版本信息

npm info @tarojs/cli

taro 初始化模板项目

taro init 99minidevelop

然后到 99minidevelop 这个目录下安装依赖即可。

微信小程序云开发模板

打开微信开发者工具，创建项目并勾选微信云开发，然后创建项目。

创建完毕的项目，打开后会默认展示云开发的新手教程，不熟悉云开发的童鞋可以自己看看。

点击“云开发”按钮，会打开云开发的后台部分，也就是存储云函数(nodejs server层) 和 数据库 及存储服务（类似oss）

更改taro项目配置与微信云开发结合

本地的项目结构

- 99mini
  |- 99minidevelop    # taro项目开发项目
  |- 99miniprogram    # 微信小程序项目
    |- cloudfunctions # 云函数目录 
    |- miniprogram    # 微信小程序前端

taro开发项目配置更改

1. 修改99minidevelop/config/index.js文件的outputRoot到99miniprogram/miniprogram
2. 根据个人爱好设置alias (目录或文件别名)
3. 配置mini的cssModules (比较懒的情况下就开启全局cssModules转换，防止css类名重复)

cssModules: {
   
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
   
          namingPattern: 'global', // 转换模式，取值为 global/module
          generateScopedName: '[name]_[local]_[hash:base64:2]'
        }
}

运行启动taro项目

npm run dev:weapp

小程序产品初设

代码实现

获取的openid等信息只是简单传播，跟云函数层的接口认证一般实际项目中都会生成x-token鉴权，这里不做处理，毕竟2小时不能要求太多，哈哈。

app.config.js 注册页面路由及TabBar配置

export default defineAppConfig({
  pages: [
    'pages/home/index',
    'pages/list/index',
    'pages/detail/index',
    'pages/my/index',
    'pages/about/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    color: '#cdcdcd',
    selectedColor: '#333333',
    backgroundColor: '#fff',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'pages/home/index',
        text: '首页',
        iconPath: './assets/images/icon_home.png',
        selectedIconPath: './assets/images/icon_home_chk.png',
      },
      {
        pagePath: 'pages/list/index',
        text: '发现',
        iconPath: './assets/images/icon_list.png',
        selectedIconPath: './assets/images/icon_list_chk.png',
      },
      {
        pagePath: 'pages/my/index',
        text: '我的',
        iconPath: './assets/images/icon_my.png',
        selectedIconPath: './assets/images/icon_my_chk.png',
      }
    ]
  }
})

引入全局iconfont.less

在iconfont上挑选图标组成一个项目，导出字体图标，然后在项目入口引用

@import "./assets/iconfont/iconfont.less";
body,
page {
  background: #f2f2f2;
}