小程序开发步骤（云开发）

本文链接： https://blog.csdn.net/a1390033590/article/details/98487540

1.下载安装微信开发者工具

2新建文件夹movie-1，微信开发者工具新建项目，选择新建的文件夹，AppID(小程序ID)在（https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=1101104584&lang=zh_CN）开发者设置里，选择云开发，确定

3.把pages里面的文件删除，在app.json里面配置文件，在pages数组中写上文件路径，文件会自动生成，然后配置tabBar，对应显示在下方导航栏。window配置也可以根据项目风格配置

{
  "pages": [
    "pages/movie/movie",
    "pages/profile/profile"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#E54847",
    "navigationBarTitleText": "最新电影",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#E54847",
      "list": [
        {
          "pagePath": "pages/movie/movie",
          "text": "电影"
        },
        {
          "pagePath": "pages/profile/profile",
          "text": "我的"
        }
      ]
  },
  "sitemapLocation": "sitemap.json"
}

4.使用插件的方法（Vant Weapp）

4.1 在文件miniprogram处右击，选择在终端处打开

npm init 初始化仓库，会生成package.json 文件

4.2 在终端安装npm i vant-weapp -S --production package.json会多出文件

4.3 点击微信开发者工具菜单栏上面的工具-->构建npm确定后会生成miniprogram_npm文件

4.4 （重要）开发者工具最右面详情按钮本地设置下面选择使用npm模块

4.5 尝试按钮效果

打开vant weapp 官网引入，在对应页面的json文件中

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

5.小程序发请求

5.1小程序端发送请求

5.2云函数端发送请求

5.2.1 使用request-promise方法（直接在github上搜索）

npm install --save request
npm install --save request-promise

5.2.2 在项目中先创建一个云函数（右击cloudfunctions文件夹->新建node.js云函数->命名movielist->右击选择在终端打开安装上面命令）

5.2.3 安装好后movielist文件下package.json中会有

"dependencies": {
    "request": "^2.88.0",
    "request-promise": "^4.2.4",
    "wx-server-sdk": "latest"
  }

安装成功。

5.2.4 在云函数中使用

在index.js文件夹下加载 const rp = require('request-promise');

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const rp = require('request-promise')

// 云函数入口函数
exports.main = async (event, context) => {

  return rp(`http://api.doubn.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`)
          .then(res => {
            return res
          })
          .catch(err => {
            console.log(err)
          })
}

右键movielist文件，上传并部署：云端安装依赖（不上传node_modules）上传完成

在miniprogram文件夹下面的movie.js中使用云函数

//index.js
const app = getApp()

Page({
  data: {
  },

  onLoad: function() {
    console.log(0);
    wx.cloud.callFunction({
      name: 'movielist1',
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  } 

})

控制台打印res （云函数中console里面会打印在云开发云函数日志中）

小程序开发步骤（云开发）

猜你喜欢