受欢迎的博客标签

wechat-微信小程序云开发实战记录（40）-微信小程序云开发mini-blog git项目源代码环境搭建步骤记录

Published
Created: 2019年2月1日星期五 14:57:52 Latest updated:2024年1月31日星期三 19:10:36 views(3369)

How to create a WeChat Cloud Mini Program step by step?

 

Step1.新建立目录iAspNetCoreStocksoMiniProgramClound，存放git项目源代码

E:\iAspNetCoreMiniProgram\src\iAspNetCoreStocksoMiniProgramClound

copy *.*  E:\iAspNetCoreMiniProgram\src\iAspNetCoreStocksoMiniProgramClound

F:\weixin\iAspNetCoreMiniProgram\src\iAspNetCoreMslyMiniProgramClound 的目录

2021/04/03  00:11    <DIR>          ..
2021/04/03  00:11    <DIR>          miniprogram
2021/04/03  00:11    <DIR>          cloudfunctions
2021/04/03  00:11    <DIR>          .
2021/03/18  20:04             1,066 LICENSE
2021/04/03  00:37             1,616 project.config.json
2021/03/18  21:39             3,427 README.md
2021/03/18  20:04                54 .gitignore
Copy

Step 2.打开微信开发者工具，导入项目，名称自定义，AppID改为自己的个人的小程序账号

 

Step 3. 修改配置

直接修改appid

project.config.json

F:\weixin\iAspNetCoreMiniProgram\src\iAspNetCoreStocksoMiniProgramClound\project.config.json

"appid": "wx41597ef1b984e8cd",
  "projectname": "mini-blog",
  "libVersion": "2.8.3",
Copy

utils/config.js 配置文件

修改云开发环境变量

/**
 * 云开发环境   wxc3be79b8116877581 
 */
var env ="debug-6gvja623121254e7"
Copy

在小程序后台申请订阅号消息模板，获取留言模板id

/*
*  在小程序后台申请订阅号消息模板，获取留言模板id
*/
var subcributeTemplateId="uaSmQE2VThEyF5uOsDVfqZw44vflTcuLbM4uAsbnOys"
Copy

2.点击开发工具->云开发->建立环境

微信小程序允许用户创建两个环境（通常一个测试环境，一个正式环境），需要上传哪个环境的云函数就切换至哪个环境。

3.上传云函数

首先需要将你的云函数进行上传，在对应的云函数名称上右击-上传并部署到官方服务器

4.新建集合

 

5.修改集合权限

 

4.在程序中app.js修改环境变量

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: 'stockso-debug-0f1d93',// 前往云开发控制台获取环境id，如果使用默认环境则不需要填写
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})
Copy

5.修改小程序标题

app.json

"navigationBarTitleText": "股搜网小程序",
Copy
{
  "pages": [
    "pages/index/index"
    
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "股搜网小程序",
    "navigationBarTextStyle": "black"
  }
}
Copy

6.启用 weui样式

/**app.wxss**/
@import 'style/weui.wxss';
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
Copy

7.加tabbar

图像等以iAspNetCoreStocksoMiniProgramClound\miniprogram为根目录

{
  "pages": [
    "pages/frontend/index/index",
    "pages/frontend/classify/index",
    "pages/frontend/cart/index",
    "pages/frontend/my/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "股搜网小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#479de6",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/frontend/index/index",
        "iconPath": "pages/frontend/images/iconfont-home.png",
        "selectedIconPath": "pages/frontend/images/iconfont-home-active.png",
        "text": "主页"
      },
      {
        "pagePath": "pages/frontend/classify/index",
        "iconPath": "pages/frontend/images/iconfont-list.png",
        "selectedIconPath": "pages/frontend/images/iconfont-list-active.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/frontend/cart/index",
        "iconPath": "pages/frontend/images/iconfont-cart.png",
        "selectedIconPath": "pages/frontend/images/iconfont-cart-active.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/frontend/my/index",
        "iconPath": "pages/frontend/images/iconfont-user.png",
        "selectedIconPath": "pages/frontend/images/iconfont-user-active.png",
        "text": "我的"
      }
    ]
  }
}
Copy

 

提交评论时出现错误。

小程序中的评论不可以提交，数据有显示但是数据库缺没有，代码如下： 【云数据库名字：mini_comments】

detail.js? [sm]:476 {errMsg: "requestSubscribeMessage:fail No template data return, verify the template id exist", errCode: 20001}
Copy

代码：

formSubmit: function (e) {

    try {

      let that = this;

      let commentPage = 1

      let content = that.data.commentContent;

      console.info(content)

      if (content == undefined || content.length == 0) {

        wx.showToast({

          title: '请输入内容',

          icon: 'none',

          duration: 1500

        })

        return

      }

      wx.requestSubscribeMessage({

        tmplIds: [config.subcributeTemplateId],

        success(res) {

          wx.showLoading({

            title: '加载中...',

          })

          console.info(res)

          console.info(res[config.subcributeTemplateId])

          that.submitContent(content, commentPage, res[config.subcributeTemplateId]).then((res) => {

            console.info(res)

            wx.hideLoading()

          })

        },

        fail(res) {

          console.info(res)

          wx.showToast({

            title: '程序有一点点小异常，操作失败啦',

            icon: 'none',

            duration: 1500

          })

        }

      })

    }

    catch (err) {

      wx.showToast({

        title: '程序有一点点小异常，操作失败啦',

        icon: 'none',

        duration: 1500

      })

      console.info(err)

      wx.hideLoading()

    }

  },
Copy

原因：订阅消息没有弄。