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

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

      #这次请求使用ajax库 request-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]