小程序开发入门

云开发篇

1.注册完成后得到APPID

2.选择激活云开发权限

3.清空 pages 文件夹内容

4.在app.json中配置 如下

{
  "pages": [
    "pages/movie/movie",  
    "pages/profile/profile"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e54847",
    "navigationBarTitleText": "最新电影",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "images/movie.png",
        "selectedIconPath": "images/movie-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

小程序基础页面完成

cd  miniprogram   

npm init   完成后

引入vant

1》npm i @vant/weapp -S --production    载项目下 

2》将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3>如果你是在miniprogram  初始npm  就不用在它的位置

4》打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项

5》在index.js

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

6><van-button type="danger">危险按钮</van-button>   有效果了

---

新建node.js 云函数    mo

cd mo      npm i axios   

部署到到云函数依赖

在云函数index.js

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

cloud.init()
const axios = require('axios')
// 云函数入口函数
exports.main = async (event, context) => {
    try {
        const {data} = await axios({
            url: `https:///api/v2/subject_collection/movie_showing/items?start=${event.start}&count=${event.count}`,
            method: 'get',
            headers: {

                "Host": "frodo.douban.com",
    
    
                'Referer': 'https://servicewechat.com/wx2f9b06c1de1ccfca/81/page-frame.html'
            }
        })
        console.log(data);
        return data
    } catch (error) {
        console.log(error);
    }
}

在主页面中调用

getMovieList() {
        wx.showLoading({
            title: '正在加载---',
          })
          wx.cloud.callFunction({
              name: 'movielist',
              data: {
                  start: this.data.movielist.length,
                  count: 10
              }
          }).then( res => {
              console.log(res);
              this.setData({
                  movielist: this.data.movielist.concat(res.result.subject_collection_items)
              })
              wx.hideLoading()
          }).catch( err => {
              console.log(err);
              wx.hideLoading()
          })
    }

---

跳转页面

gotoComment(e) {
        const {id} = e.target.dataset
        wx.navigateTo({
          url: `../comment/comment?id=${id}`,
        })
    },