欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Taro 小程序初体验

发表日期:2019-11 文章编辑:小灯 浏览次数:414

基于Taro + Taro-ui + 微信云开发 初步实现了一个小程序

小程序码

开始

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

项目初始化

  • 使用命令创建模板项目
taro init taro-timer
  • 按提示进行相应的选择(微信云开发可直接选择wxcloud模板)

  • 模板目录

注意:

  • 开发时,进入 client 目录,在此目录下运行相关编译预览或打包命令
  • 使用微信开发者工具调试项目,请将项目 整个文件夹 作为运行目录。 注意: 不是 client 中生成的 dist 文件夹

云开发配置

为区分开发环境及线上环境,需申请两个云资源环境,如: dev-idpro-id,分别用于开发环境及线上环境。然后修改以下文件进行适配。 微信云开发官方文档
  1. 修改小程序项目配置文件 project.config.json, 如:

    // 注意:只有填写开通云开发后的appid, 微信小程序开发者工具中才会显示`云开发`按钮
    {
        "miniprogramRoot": "client/dist/",    // 小程序项目文件(taro编译后的)
        "cloudfunctionRoot": "cloud/functions/", // 小程序对应的云函数
        "projectname": "taro-timer",
        "description": "时间节点",
        "appid": "************",  // 小程序的appid
        "setting": {
            "urlCheck": true,
            "es6": false,
            "enhance": false,
            "postcss": false,
            "minified": false,
            "newFeature": true,
            "coverView": true,
            "nodeModules": false,
            "autoAudits": false,
            "uglifyFileName": false,
            "checkInvalidKey": true,
            "checkSiteMap": true,
            "uploadWithSourceMap": true,
            "babelSetting": {
                "ignore": [],
                "disablePlugins": [],
                "outputPath": ""
            },
            "bundle": false
        },
        "compileType": "miniprogram",
        "simulatorType": "wechat",
        "simulatorPluginLibVersion": {},
        "cloudfunctionTemplateRoot": "cloudfunctionTemplate",
        "condition": {}
    }
  2. 修改Taro编译设置,用于区分开发环境及线上环境。

        // client/config/dev.js 开发环境
        module.exports = {
            env: {
                NODE_ENV: '"dev-id"' // 申请的微信小程序云开发资源id
            },
            defineConstants: {
            },
            weapp: {},
            h5: {}
        }
        // client/config/prod.js 线上环境
        module.exports = {
            env: {
                NODE_ENV: '"release-id"' // 申请的微信小程序云开发资源id
            },
            defineConstants: {
            },
            weapp: {},
            h5: {}
        }
  3. 项目入口文件 app.jsx 适配开发环境,区分开发及线上环境。

    componentDidMount() {
        if (process.env.TARO_ENV === 'weapp') {
        Taro.cloud.init({
            env: process.env.NODE_ENV,
            traceUser: true
        })
        }
    }
  4. 云函数配置 关于常量DYNAMIC_CURRENT_ENV

    // 云函数入口文件
    const cloud = require("wx-server-sdk");
    cloud.init({
        env: cloud.DYNAMIC_CURRENT_ENV
    });

顺利的话,此时于client文件夹下执行npm run dev:weappnpm run build:weapp 会分别调用相应环境的云函数。

未完待续...

第一个页面

第一个云函数

参考

  1. Taro官方文档
  2. Taro-ui官方文档
  3. 微信小程序开发相关文档

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户参考了本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:https://www.dengtar.com/25254.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.