关于微信小程序的一些总结

时间:2024-01-31 09:39:54

mpvue?

 

 

{{}} 在vue和小程序中的区别?

    01 小程序中{{}}和vue中的{{}}用法基本一致,可以显示data中的数据,可以写表达式

    不一样的地方?

    01 小程序的{{}}可以写在属性中

    02 小程序的{{}}不能使用方法的调用

 

 

微信小程序中的 wx:key

    01 wx:for 可以遍历数组中的数据

    02 wx:for  一定要指定wx:key,不然会报一个警告

    03 wx:key  的值有两种方式

        如果遍历的值是一个对象,wx:key可以是对象中某一个唯一的属性 。 

        如果数组中的值是一个字符串,wx:可以指定为*this, *this表示字符串本身。

 

 

在微信小程序中注册事件分为两种

    bind+事件:  bind注册的事件会冒泡 

    catch+事件:   catch注册的事件不会冒泡

 

在方法中如何放到data中的数据?

    大坑:在微信小程序中的数据,数据不是双向绑定

    data中的数据发生了改变,视图中的数据并没有跟着改变

    直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。

方法一
data: { msg:
"hellow 小程序" }, change(){ this.setData({ msg:\'哈哈哈\' //要修改的参数和值 }) }
通过 this.setData({ }) 方式进行修改,可以实现双向绑定

 

方法二  
data: { msg:
"hellow 小程序" }, change(){ // 修改msg的值 this.data.msg="你好啊" // 需要进行一次同步 this.setData(this.data) }

 

 

在小程序中将数据保存data有一个专用方法

this.setData({

  属性名:新值

})

 

 

 

如何获取input文本框的值?

    01通过e.detail.value

    02如果注册事件的时候,想要传递参数,给当前元素添加自定义属,通过e.currentTaget.dataset来获取值。

 

js中的data中发生了改变,页面中的数据并不会改变,调用setData同步才行

 

input框中的值发生了改变,js中的数据并不会跟着变,自己注册事件,自己修改data中的数据。微信小程序中不支持双向绑定

 

 微信支付

 https://blog.brain1981.com/1946.html

 

小程序的生命周期,app.js页面(创建一个小程序的实例,只会调用一次)

//app.js   初始化小程序 , 做一些通用的操作
App({
// 小程序初始化的时候执行的钩子函数,全局只会触发一次
// 小程序中一次性的操作,都可以放到onLaunch中
// 比如: 登录  获取你的用户信息
    onLaunch(){ //做登录  获取用户信息等
        console.log(\'onLaunch\',\'小程序初始化好了\')
    },
// 只要小程序显示出来了,就会执行
    onShow(){  
        console.log(\'onShow\',\'小程序显示了\')
    },
// 小程序隐藏的时候触发
    onHide(){
      console.log(\'onHide\',\'小程序隐藏的时候\')
    },
// 小程序脚本发生错误就会触发
    onError(){
      // 可以把错误的信息收集起来,放到数据库
      console.log(\'onError\',\'报错了\')
    },
// 小程序哟啊打开的页面不存在的时候触发
    onPageNotFound(){

    }
})

 

Page页面(创建页面)

// pages/index/index.js  
// page方法用来创建一个小程序的页面
Page({
  
// 页面加载的时候会执行onLoad,一次
  onLoad () {
      console.log(\'onLoad\',\'页面加载了\')
  },

// 页面显示
  onShow () {//一般在这里发送ajax
      console.log(\'onShow\',\'页面显示的时候就会执行\')
  },

// 页面隐藏
  onHide () {
    console.log(\'onHide\', \'页面隐藏的时候就会执行\')
  },
  
  // 表示页面已经渲染完了
  onReady (){//可以发送ajax
    console.log(\'onReady\', \'页面渲染完了\')
    wx.setNavigationBarTitle({
      title: \'yyyy\'
    })
  },
//  页面卸载时候触发
  onUnload () {

  }

})

 

     

 

小程序发送ajax请求

// pages/sy/sy.js
Page({
  data: {
    imgList: [],//用于存储轮播图数据
  },

  onShow: function () {
    wx.request({
      url: \'https://locally.uieee.com/slides\', 
      method:\'GET\',
      dataType:\'json\',
      success:(res)=>{
        this.data.imgList=res.data
        //同步
        this.setData(this.data)
      }
  })
  }

})

 

 

 

微信开发工具下载地址

     https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

创建项目

 

 

 

 

 

1  微信公众平台 :   https://mp.weixin.qq.com/

 

 

 

2 小程序秘钥  AppID  :   左侧导航栏----开发---开发设置

 

 

 

云开发  

详情----调试基础库 2.2.5

注意事项:每一个小程序项目不能超过2M

 

 

 

 

 

 

 

微信小程序中常见的标签  wxml

<view></view> 相当于html中的 div块级元素
<text></text> 文本,相当于 span函内元素
<image></image> 相当于 <img src=\'\'/>
<form></form> 表单
 
文本标签
selectable  是否可以复制
 
图片
<image src=\'\' lazy-load=\'true\'></image> 图片懒加载
lazy-load=\'true\' : 等图片下载完成后再显示图片内容
图片默认大小  320*240

 

wxss

(1)单位:rpx     -----响应式像素。可以根据屏幕的宽度自适应调用图片文字容器大小

(2)引入外部的样式文件     @import \'./base.wxss\'

 

关于RPX,移动端开发你使用的是什么像素?

示例: iphone6(2)

逻辑像素 * dpr = 物理像素

iphone6    375px * 2 = 750rpx

 

 

 

小程序,引入其它样式文件

    将项目公共样式内容统一保存在一个文件中

style/common.wxss

@import  \'../../style/common/wxss\'

 

小程序开发文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

 

微信公众平台--小程序(重点)-第三方组件库(样式库) 

 

 

云开发兼容性

 

 

 

小程序第三方组件库(样式库)

Vant Weapp

https://youzan.github.io/vant-weapp/#/intro

 -WeUI

 -iView Weapp

 

小程序 配置文件

project.config.json  项目配置文件

app.json                   项目全局配置文件

exam01.json    组件配置文件

 

app.json    全局配置文件

如果一个选项添加 app.json 中 所有的组局都会生效

 

 

微信小程序中 js 与 网页 程序中 js有什么区别?

    ECMA 基本类型: string  ;number; boolean;undefined ; null;

    ECMA 对象类型:Date ; Math ; RegExp ; Array ; Function ;...

    DOM/BOM 不能使用,小程序中写  document.getElemnt会报错

    

微信小程序循环  wx:for

    <view wx:for="{{数组名称}}" wx:key="index">
        {{item}} 当前对象
        {{index}} 当前元素下标
    </view>
    wx:for="{{循环数组名称}}"
    wx:key="index" 数组元素下标(排序规则),快速排序

 

wx:if

    <view wx:if="{{condition}}"></view>
    condition:表达式 true false
    true  当前元素正常显示
    false 当前元素删除

 

 

  if   elif   else

    <view wx:if="{{condition}}">111</view>                 // if

    <view wx:elif="{{condition}}">222</view>             // else if

    <view wx:else>333</view>            // else

 

hidden

    <view hidden="{{condition}}">内容</view>

    condition:表达式 true false

    true隐藏  false 显示

   问题:什么时候使用if 什么时候使用hidden

   (1)如果此元素需要频繁切换使用hidden

   (2)如果此元素在运行中不大可能改变则 wx:if 较好

 

微信公众平台--小程序--js/事件-事件

   pc端项目   屏幕宽度 > 970px 操作:鼠标键盘

   移动端项目 屏幕宽度 < 970px 操作:手指

 

移动端项目:

    touchstart  当手指触碰到屏幕时发生的事件,不管几根手指

    touchmove   当手指在屏幕上滑动的时候触发

    touchend   当手指离开屏幕时候触发

 

    zepto.js    相当于移动端的jquery

    tap   触碰一次

    longtap 长按一次 超过350ms

    swipe  滑动

    swipeLeft 滑动

  

微信小程序事件分为两种

    小程序事件分为两种 

   (1)冒泡事件:当一个组件上事件被触发后,该事件向父元素传递

 

   (2)非冒泡事件:当一个组件上事件被触发后,不向父元素传递

 

 

  小程序绑定事件方式

 

 

-支持事件冒泡

 

     <view bind事件名="事件处理函数"></view>

 

    -不支持事件冒泡

 

     <view catch事件名="事件处理函数"></view>

 

 例子  

支持冒泡

 

    <view bindtap=\'handle2\'>父元素
        <view bindtap=\'handle1\'>子元素</view>
    </view>

 

不支持冒泡

   <view catchtap=\'handle2\'>父元素
        <view catchtap=\'handle1\'>子元素</view>
   </view>

 

 

 

小程序--生命周期(组件)

     组件生命周期:一个组件从创建开始到使用最后销毁过程

  /*
   组件创建成功后触发一次
        (1)发送ajax请求
        (2)获取传递参数 
   */
  onLoad (options) {   },


/* 组件渲染成功后触发一次 */ onReady () { },

/* 显示组件 */ onShow () { },
/* 隐藏组件 */ onHide () { }, /* 销毁组件 */ onUnload () { },

 上拉加载  下拉刷新

  /**
   * --监听用户下拉动作  (用户下拉操作,刷新操作)  下拉刷新
   *   小程序默认禁止 用户下拉操作
   *   修改默认行为,激活下拉。
   *      01 全局修改  app.json 文件 window 下 修改
   *                "enablePullDownRefresh": true  允许下拉
   *      02 当前组件修改 在当前组件的json文件中 修改
   *                "enablePullDownRefresh": true  允许下拉
   */                
  onPullDownRefresh () {
    console.log(\'下拉刷新\')
  },

  /**
   * 页面上拉触底事件的处理函数  (上拉触底,翻页加载) 上拉加载
   */
  onReachBottom () {
      console.log(\'上拉加载\')
  }

 

 

 

 

 

 

 

 

微信小程序组件跳转  wx.redirectTo({}) -----不能返回,因为跳转后把原先的组件销毁了

利用 wx.redirectTo({}) 实现跳转   

比如       组件1   跳转到  组件 2。 会先卸载组件1  然后创建组件2

 

 

保留并且跳转

 

      wx.navigateTo({

 

         url:"/pages/comment/comment"

 

      })

 

 

 

小程序--云开发

    小程序与腾讯云合作新方案[云开发] 

    云开发==[云数据库+云存储+云函数]

 

云数据库:数据增加/删除/修改/查询....

云存储:上传文件/下载文件/分享文件/管理文件....

 

云函数:获取appid/调用高级权限操作 (没有跨域)

 

 

小程序--开通云开发

  小程序开发工具-->"云开发" 开通

  环境名称:[web-test-01]英文 数字 -

  环境id:[] 自动生成环境复制下来

 

小程序--云数据库(mongodb nosql数据库)  

   云开发提供一个JSON数据库提供2GB免费空间

 

关系型数据库

文档数据库

数据库 database

数据库 database

表  table

集合 collection

行   row

记录 record/doc

列   column

字段 field

 

  #关系型数据库:适合复杂数据关系  企业内部软件系统

  #文档型数据库:数据关系简单 频繁查询,更新   app

 

数据类型

 

String 字符串

Number数字

Object 对象

Array数组

Bool   布尔

GeoPoint 地理位置点

Date   时间(客户端)

NULL

 

 

小程序--云数据库操作

  (1)控制台:  创建集合

  (2)云函数

  (3)小程序操作:

 

通过小程序操作云数据库

(1)通过控制台 创建集合  比如 web2008

(2)初始化默认数据库

    const db = wx.cloud.database();

(3)向集合中添加新记录

    db.collection(\'集合名称\').add(

      {

       data:{name:\'zxh\',age:\'18\'},

       success:function( res ){ },

       fail:function(err){ }

      }

    )

 

  add() 向集合中添加数据

  data:{} 数据

  success 添加成功回调函数

  fail    添加失败回调函数

 

 

  常见错误:

   (1) -502005 database collection not exists

   #集合不存在 web1903

   原因1:拼写错误db.collection("拼写错误")

   原因2:没有集合

   (2)如果创建二个环境

    const db = wx.cloud.database({

     env:"环境id"

    });

   env:环境

   (3) errCode: -501005 invalid env

   原因:env:"环境id错误"

 

 

小程序操作云数据库--更新

 db.collection("集合名称").doc("当前记录id").update({

  data:{

    属性名:值

  }

}).then( res=>{

  console.log(res)

} ).catch(err=>{

  console.log(err)

})

 

 

小程序操作云数据库--删除

    db.collection("集合名称").doc("记录id") .remove().then(res=>{}).catch(err=>{})

    #注意事项:通过小程序一次只能删除一条数据

 

 

小程序云开发-云数据库--查询

   (1)查询所有数据

 db.collection("集合名称").get().then(res=>{}).catch(err=>{})

     get:获取查询

     then:查询成功后获取返回内容

     res  查询结果

     catch:查询失败

     err   失败原因

 

   (2)查询指定数据

     db.collection("集合名称").where({name:"jerry"}).get().then(res=>{}).catch(err=>{})

     where查询条件

     get   获取查询

     then  查询成功后获取返回内容

     res    查询结果

 

 

小程序云开发-云函数

   云函数:特殊函数将其保存小程序云上(腾讯云)

   云函数从功能很多优点:权限高 完成复杂操作

 #注意事项:开发云函数要求本地下载安装nodejs v8.0 以上

 

 

小程序云开发-云函数-求和函数 sum

 

   (1)开发工具 coludfunctions

     鼠标右键->新建node.js云函数

   (2)云函数名称 sumc

   (3)打开index.js

   (4)添加云函数代码

     exports.main = async (event,context)=>{

       return {

          sumc:event.i + event.j

        }

     }

     exports 导出    event 事件对象(获取用户参数)

     main   主函数  context 上下文对象(获取用户信息)

     async   导步(ES7语法)

   (5)上传部署

     右击创建并部署,云端安装依赖

   (6)测试云函数

   (7)在小程序中调用开发云函数

     wx.cloud.callFunction({   //调用云函数

       name:"云函数名",    //云函数名

       data:{i:1,j:2}         //参数

     }).then(res=>{          //调用成功

       console.log(res);

     }).catch(err=>{         //调用失败

       console.log(err);

     })

 

 

 

 

    #注意事项:如果你旧版本小程序工具没有server-sdk报错

 

    #右击 countFunctions 在终端中打开

 

    #npm install --save wx-server-sdk@latest

 

 

 

    常见错误

    (1) Error: errCode: -404011 cloud function execution error

    原因:

   -调用云函数不存在 

  -调用去函数没有上传

-云函数名子拼写错误

 

 

 

小程序云开发-云函数-login 登录

 

 

 

 

 

 

小程序云开发-云函数-批量删除

    云数据库web2019 同名记录 name:"zxy"

    云函数目的:删除name:"zxy"

    async:异步ES7 异步执行函数

    await:等待如果执行耗时任务启动关键字等待任务

执行完

 

const cloud = require(\'wx-server-sdk\')  
cloud.init()// 初始化 cloud
const db = cloud.database();//初始化云数据库

    exports.main = async  (event,context)=>{

      try{ // await 等删完之后再返回结果

        return await db.collection("web2019").where({

            name:"zxy"

         }).remove();

      }catch(e){

         console.log(e);

      }

    }

 

 

 

小程序云开发-云存储-5GB

    (1)用户上传文件流程

      -用户选择相册或拍照

      -小程序上传所选中图片

      -云存储返回图片 fileID  //在云存储图片地址

    (2)开发流程

      -选择图片

wx.chooseImage({

  count: 1 , //一次选择几张图片默认 9

  sizeType: ["original", "compressed"], //选中图片类型 (原图/压缩)

  sourceType: ["album", "camera"], //图片来源 (相册/相机)

  success: function (res) { //选中图片成功回调

  res.tempFilePaths //选中图片地址,返回数组

  }

});

 

 -上传图片

wx.cloud.uploadFile();

       cloudPath: 上传成功后新文件名

        filePath:   选中图片名

        success:res=>{  上传成功

        console.log(res.fileID); 

        上传成功后返回指定文件路径

}

例子:如下

Page({
  data: {},

  downP(){//自定义构造函数downP(){ }
    wx.chooseImage({
      count: 1   ,                            //一次选择几张图片默认 9
      sizeType: ["original", "compressed"],   //选中图片类型 (原图/压缩)                       
      sourceType: ["album", "camera"],        //图片来源 (相册/相机)
      success: function (res) {               //选中图片成功回调
          var list = res.tempFilePaths        //选中图片地址,返回数组
          var file = list[0]                  //选中的图片地址
      wx.cloud.uploadFile({                   //上传图片至云存储
        cloudPath: +new Date()+".jpg",        //时间戳起一个名字
        filePath: file,                       //选中的要上传的图片地址
        success: res => {
          console.log(res)
          console.log(res.fileID);            //上传成功后返回指定文件路径
        }
      });

      }

    });

  },

  onLoad: function (options) {},
  onReady: function () { },
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

 

 

综合例子

文件上传与显示功能:利用云函数将图片上传到云存储,再将云存储中的图片地址存储到云数据库的集合中

    *云数据库创建集合 myphoto  目标:保存上传文件fileID

    *创建组件 pages/myphoto/myphoto

    *添加按钮 "上传图片"

    *将上传文件fileID保存myphoto

    *创建按钮 "显示图片"

    *获取集合中myphoto 创建循环遍历 fileID

    <image src="{{item.fileID}} "></image>

const db = wx.cloud.database();       //初始化默认数据库
Page({
  data: { // 通过this.setData({}) 添加数据
    list:[]  //云存储图片fileID
  },
  showPic(){//此函数负责获取myphoto集合所有记录,并且显示在模板中
    db.collection("myphoto").get()//获取集合中所有的记录
    .then(res => {
      var result = res.data
      console.log(result)
      this.setData({     //向data中添加数据
        list:result
      })
      })
    .catch(err => { console.log(err)})
  },
  myupload(){
    wx.chooseImage({//此函数负责选中图片并且上传至云储存,上传成功后将图片fileID保存myphoto集合中
      count: 1,                               //一次选择几张图片默认 9
      sizeType: ["original", "compressed"],   //选中图片类型 (原图/压缩)                       
      sourceType: ["album", "camera"],        //图片来源 (相册/相机)
      success(res){                           //选中图片成功回调
        var list = res.tempFilePaths          //选中图片地址,返回数组
        var file = list[0]                    //选中的图片地址
      wx.cloud.uploadFile({                   //上传图片至云存储
        cloudPath: +new Date() + ".jpg",        //时间戳起一个名字
        filePath: file,                       //选中的要上传的图片地址
        success(res){
          var fID = res.fileID   //上传成功后返回指定文件路径
          db.collection(\'myphoto\').add(//向集合中添加数据
                  {
                     data: { fileID : fID },
                     success(res){console.log(res)},
                           fail(err){ console.log(err) }
                  }
              )       
        },
        fail(err){                          //上传失败 返回err
          console.log(err)
        }
      });
    },
      fail(err){
        console.log(err)
      }
    });
  },

  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {

  },
  onHide: function () {

  },
  onUnload: function () {

  },
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

 

环境id报错,如果有两个环境id,一直报错,配置如下

 

 

小程序--商城项目-下载安装vant 第三方库

    有赞团为vant网站

    https://youzan.github.io/vant-weapp

    (1)创建项目描述文件 package.json   默认没有package.json,需要自己创建 如何创建? 如下

     右击 miniprogram 目录->选中在终端中打开

     输入命令 npm init    回车 回车 ..

     #npm init 功能生成项目描述文件 package.json

     #执行成功后生成 package.json文件

 

    (2)通过npm 安装vant 第三方组件库

     右击 miniprograme 目录->选中在终端中打开

     输入命令 npm i vant-weapp -S --production  回车

     #安装成功看到文件夹 node_modules

     #右击miniprograme 在硬盘打开

 

    (3)点击工具菜单-->构建npm

     #node_modues内容复制一份 miniprogram_npm

     #常见错误 module .. not defined

     #请重新登录

     解决:点击工具菜单->构建npm

 

    (4)点击工具菜单->详情 (点击右上角详情)

     [*] 使用npm 模块

 

    (5)在组件中配置要使用哪个第三方组件,比如使用button

 

      "usingComponents": {

         "van-button": "vant-weapp/button/index"

      }

#注意:组件路径修改与miniprogram_npm下目录结构相同

    (6)在当前组件中使用button按钮

      <van-button type="default">默认按钮</van-button>

 

 

小程序--商城项目-娱乐

(1)电影列表从"豆瓣网"下载最新电影列表

    豆瓣网热映电影列表

http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10

    第一个部分:接口地址

    第二个部分:apikey=密钥(别人开发者密钥)

    第三个部分:start  第几条记录开始

               count 本次查询几条记录

 

(2)如何获取"豆瓣网"热映电影列表-发送ajax请求

      小程序有二种请求数据方式

 

小程序端

云函数

发送方法

wx.request({})

下载第三方ajax  (request)

协议支持

只支持https

根据第三方库决定

是否备案

经过ICP备案

可以不备案

域名个数

最多20

无限制

 

 

 

 

 

开发云函数获取"豆瓣"电影列表

      -创建云函数 movielist3

      -点击movielist3 鼠标右键->终端打开

      #注意下面命令有顺序

      npm install --save request

      npm install --save request-promise

      #此次请求使用ajaxrequest-promise

      #上面库是request-promise 依赖库

 

开发云函数

       (1)引入 request-promise

       var rp = require("request-promise");

       (2)导出创建main函数

       exports.main = async (event,context)=>{}

       event:事件对象保存请求参数

       context:上下文对象  用户openid appid..

       (3)创建url 请求地址

       var url = `http://api..&start=${event.start}

          &count=${event.count}`;

       (4)rp(url)   返回查询结果

 代码如下

// 云函数入口文件
const cloud = require(\'wx-server-sdk\')  
cloud.init()
// 云函数movellist3,此函数功能:向豆瓣网发送请求,获取最新热映电影列表
// 01 引入第三方ajax库 request-promise
// 02 创建main函数
// 03 创建变量 url 请求地址
// 04 请求rp函数发送请求并且将豆瓣返回电影列表返回调用者
var rp = require("request-promise");
exports.main = async (event, context) => {
   return event
  var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`
  return rp(url)  //发送请求
  .then( res=>{   //请求成功
    return res
  } )
  .catch( err=>{
    console.log(err)
  } )
}

 

上拉加载

拼接

// pages/home/home.js
Page({
  data: {
    list:[]
  },
  loadMore(){
    wx.cloud.callFunction({   //调用云函数
      name: "movielist3",    //云函数名
      data: { start:this.data.list.lenght, count:10 } //参数
    }).then(res => {          //调用成功
      var obj = JSON.parse(res.result)//将字符串转为js对象
      var rows = obj.subjects;//保存电影列表的数据
      rows = this.data.list.concat(rows)//将电影列表数组拼接操作
      this.setData({
        list: rows  //保存电影列表subjects电影列表
      })
      console.log(obj.subjects)
    }).catch(err => {         //调用失败
      console.log(err);

    })

  },
  onLoad: function (options) {
    this.loadMore() 
  },
  onReachBottom: function () {//页面上拉触底事件的处理函数
    this.loadMore()//发送请求下载下一页的数据
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onPullDownRefresh: function () {},
  onShareAppMessage: function () {

  }
})

 

 

商城--娱乐详情完成-准备

    (1)创建组件 comment

    (2)创建云函数getDetail3 获取某部电影详细信息

    (3)下载安装两个依据ajax

      npm install --save request          #依赖库

      npm install --save request-promise   #请求库

      #每个云函安装自己所需依赖

    (4)检查url 豆瓣电影详情 url

      http://api.douban.com/v2/movie/subject/26794435?apikey=0df993c66c0c636e29ecbb5344252a4a

    (5)上传部署云函数

    (6)云测试

 

 

小程序发送ajax

const cloud = require(\'wx-server-sdk\')
cloud.init()
/* s
功能:发送ajax请求获取豆瓣电影详情内容
01引入第三方库request-Promise
02创建main函数
03向豆瓣发送请求
04返回豆瓣电影详情内容
*/
var rp = require("request-promise");  
exports.main = async (event, context) => {//event--接收参数, context--上下文对象 
  var url = `http://api.douban.com/v2/movie/subject/${event.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`  
  return rp(url)  //发送请求
    .then(res => {return res} )//函数执行成功
    .catch( err => {console.log(err)} )
}

 

// 云函数入口文件
const cloud = require(\'wx-server-sdk\')  
cloud.init()
// 云函数movellist3,此函数功能:向豆瓣网发送请求,获取最新热映电影列表
// 01 引入第三方ajax库 request-promise
// 02 创建main函数
// 03 创建变量 url 请求地址
// 04 请求rp函数发送请求并且将豆瓣返回电影列表返回调用者
var rp = require("request-promise");
exports.main = async (event, context) => {
  var url = `http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`
  return rp(url)  //发送请求
  .then( res=>{   //请求成功
    return res
  } )
  .catch( err=>{
    console.log(err)
  } )
}

 

商城--娱乐详情完成-开发(第三方组件库 vant)

  https://youzan.github.io/vant-weapp/  文档手册

  (1)输入框    

  (2)打分      

  (3)上传按钮  

  

商城--娱乐详情完成-输入框

  (1)查看手机

  (2)打开配置文件comment.json

  #删除多余目录 path/to/dist

  {

  "usingComponents": {

    "van-field": "vant-weapp/field/index",

    "van-button": "vant-weapp/button/index",

    "van-rate": "vant-weapp/rate/index"

  }

 }

  (3)在模板中使用组件 comment.wxml

   <van-field

    value="{{ value }}"               //用户输入内容

    placeholder="请输入用户名"     //占位符

    bind:change="onChange"        //输入事件

  />

(4)在模板中使用组件 comment.js

  Page({

  data: {

    value: \'\'

  },

  onChange(event) {

    console.log(event.detail);

  }

});

 

背景虚化 效果

/* pages/comment/comment.wxss */
/* 1 电影背景图片虚化效果 */
.detai-container{
   /* position: relative; */
    height: 400rpx;
    filter: blur(40rpx); /* 模糊滤镜 */
    opacity: 0.9      /*透明度 */
}

/* 2 电影背景遮罩层,显示电影背景底图 */
.detail-mask{
    position: absolute;
    width: 100%;
    height: 400rpx;
    background: #333;   /* 深色的背景 */
    top:0;
    left: 0;
    z-index: -1;    /*显示在底层*/
}

.detail-info{
    position: absolute;
    display: flex;    /*弹性布局*/
    top:0;
    left: 0;
    width: 100%;
    height: 400rpx; /*高度与遮罩层一致*/
    padding: 20rpx
}

.detail-img{
  width: 280rpx;    /* 大图宽度 */
  height: 90%;  /* 大图高度 */
  margin-right: 24rpx;  /* 与右侧文字间距 */
}

 

微信加载中

wx.showLoading({
title: \'加载中...\',
})
 
wx.hideLoading() //加载完调用
 
 
匹配图片后缀的正则 
var suffix = /\.\w+$/.exec(item)[0]