zoukankan html css js c++ java

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

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函内元素

<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

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 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

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]

查看全文

相关阅读:
如何在windows系统下安装swoole（Docker环境）
如何在windows系统下安装swoole（cgywin环境）
Docker的介绍及安装
 Java50道经典习题-程序48 数字加密
 Java50道经典习题-程序49 子串出现的个数
 Java50道经典习题-程序50 文件IO
从键盘录入一个数据，输出对应的九九乘法表
 冒泡排序
 直接排序
 Math类的三个方法比较: floor() ceil() round()

原文地址：https://www.cnblogs.com/javascript9527/p/11440499.html