【云+社区年度征文】小程序·云开发综合提升篇

<!-- 自定义组件，添加插槽，插槽的name一定要设置，使用时name要相同-->
<!-- components/title-bar/index.wxml -->
<view class='container'>
  <view class="left-container">
    <view class='line'></view>
    <text class='text'>{{title}}</text>
  </view>
  <view class="right-container">
    <!-- slot 插槽 -->
    <slot name="more"></slot>
  </view>
</view>

{
  "usingComponents": {
    "title-comp": "/components/title-bar/index"
  }
}

  <!-- 卡槽 -->
  <title-comp title="没有插槽"></title-comp>
  <title-comp title="使用插槽">
    <!--里面的<text>标签就是传递给插槽的 text 中 slot 的值需跟组件的 name 保持一致-->
    <text class="more" slot="more">更多</text>
  </title-comp>

module.exports = Behavior({
    <!--共享属性-->
    properties: {
      product: { // 属性名
        type: Object,
        // value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
        observer: function (newValue, oldValue,path) {
          console.log(newValue)
          console.log(oldValue)
          console.log(path)
        }
      }
    },
    //共享数据
    data:{
},

// 共享方法

methods: {

// 商品详情

productDetails: function () {

//  triggerEvent  组件间通信与事件

this.triggerEvent("productDetails", {

id: this.data.product.id

}, {})

}
}

})

<!-- components/product-column/index.wxml -->

<view class='container'>

<view class="left-container">

<view class='line'></view>

<text class='text' bind:tap="productDetails">{{product.name}}</text>

</view>

<view class="right-container">

<text class="text">价格：￥{{product.price}}</text>

</view>

</view>

// components/product-column/index.js

<!--引入behavior.js-->

let productBev = require("../behaviors/product.js")

Component({

<!--继承 behavior.js里面的 properties，data，methods-->

behaviors: [productBev],

/**


组件的属性列表

*/

properties: {

},
/**

组件的初始数据

*/

data: {

},
/**

组件的方法列表

*/

methods: {

}

})

<!-- components/product-row/index.wxml -->

<view class='container'>

<view class="left-container">

<view class='line'></view>

<text class='text' bind:tap="productDetails">{{product.name}}</text>

</view>

<view class="right-container">

<text class="text">数量：{{product.num}}</text>

</view>

</view>

// components/product-row/index.js

<!--引入behavior.js-->

let productBev = require("../behaviors/product.js")

Component({

<!--继承 behavior.js里面的 properties，data，methods-->

behaviors: [productBev],

/**


组件的属性列表

*/

properties: {

},
/**

组件的初始数据

*/

data: {

},
/**

组件的方法列表

*/

methods: {

}

})

{

"usingComponents": {

"product-column-comp": "/components/product-column/index",

"product-row-comp": "/components/product-row/index",

}

}

<!-- behaviors -->

<product-column-comp product="{{product}}"></product-column-comp>

<product-row-comp product="{{product}}" bind:productDetails="productDetails"></product-row-comp>

<!--components/authorize-button/index.wxml-->

<button bind:getuserinfo="onGetUserInfo" bind:tap="address" open-type="{{openType}}"  plain="{{true}}" class="container" lang="zh_CN">

<slot name="share"></slot>

<slot name="address"></slot>

<slot name="info"></slot>

</button>

// components/authorize-button/index.js

Component({

/**


组件的属性列表

/

options: {

multipleSlots: true // 在组件定义时的选项中启用多slot支持

},

properties: {

// 授权开放能力 通过传递实现

openType: {

type: String

}

},

/*
组件的初始数据

*/

data: {

},

/**

组件的方法列表

*/

methods: {

// 用户信息获取方法

onGetUserInfo(event) {

if (this.data.openType == "getUserInfo"){

console.log("-----------用户信息获取-----------")

console.log(event.detail)

}

},

// 地址信息的获取

address(event){

if (this.data.openType == "primary") {

console.log("-----------地址信息获取-----------")

this._addressInfo(event)

}

},

_addressInfo(event){

wx.chooseAddress({

success: (res) => { },

fail:(err) =>{},

complete:(e)=> {

console.log(e) // 用户授权和未授权都会执行

}

})

}

}

})

{

"usingComponents": {

"authorize-comp": "/components/authorize-button/index"

}

}

<!-- 授权 -->

<view class="authorize-item">

<authorize-comp class="authorize" open-type="getUserInfo">

<text slot="info">用户信息</text>

</authorize-comp>

<authorize-comp class="authorize" open-type="primary">

<text slot="address">获取地址</text>

</authorize-comp>

<authorize-comp class="authorize" open-type="share">

<text slot="share">分享</text>

</authorize-comp>

</view>

// components/class/index.js

Component({

// 定义外部样式类

externalClasses: ['box'],

/**
组件的属性列表

*/

properties: {

},
/**

组件的初始数据

*/

data: {

},
/**

组件的方法列表

*/

methods: {

}

})

<!--components/class/index.wxml-->

<!--box 样式通过外部传递-->

<view class="container box"></view>

{

"usingComponents": {

"class-comp": "/components/class/index"

}

}

<!-- 自定义组件样式  -->

<view class="class-item">

<class-comp box="box1"></class-comp>

<class-comp box="box2"></class-comp>

<class-comp box="box3"></class-comp>

<class-comp box="box4"></class-comp>

</view>

.box1 {

background-color: #ff3f34;

}

.box2 {

background-color: #fbbf00;

}
.box3 {

background-color: #44ac45;

}
.box4 {

background-color: #2f84d5;

}

var filters = {

// 定义方法

toFix: function (value) {

// 防止 wxs 渲染数据没有定义

if (value == 0 || !value) {

return 0

}

// toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

return parseFloat(value).toFixed(2)

}

// 多个方法使用逗号分隔

,

substr: function (value, length) {

if (!value) {

return ''

}

// 对数据进行长度限制

return value.substring(0, length) + "..."

}

}

// 导出方法

module.exports = {

toFix: filters.toFix,

substr: filters.substr

}

<!--引入 wxs 并指定标签的模块名-->

<wxs module="util" src="../../common/wxs/filter.wxs"></wxs>

<view class="wxs-container">

<view class="wxs-item">数字截取前：{{8.02231}}</view>

<view class="wxs-item">数字截取后：{{util.toFix(8.02231)}}</view>

<view class="wxs-item">订单状态页面直接引用：{{wUtil.orderStatus(1)}}</view>

</view>

<view class="wxs-item">文字截取后：{{util.substr("这是一段超级长的文字需要截取",6)}}</view>

<view class="wxs-item">订单状态页面直接引用：{{wUtil.orderStatus(1)}}</view>

<!--当前页面直接使用 wxs， 通过 wxs 标签指定模块名-->

<wxs module="wUtil">

var orderStatus = function(num) {

var value = ""

switch (num) {

case 0:

value = "未支付"

break

case 1:

value = "已支付"

break

case 2:

value = "已发货"

break

case 3:

value = "已支付，但库存不足"

break

default:

value = "未知状态"

}

return value

}

<!--导出模块-->

module.exports = {

orderStatus: orderStatus

}

</wxs>

// 云函数的 index.js

const TcbRouter = require('./router');

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

const app = new TcbRouter({ event });
// app.use 表示该中间件会适用于所有的路由
app.use(async (ctx, next) => {
    ctx.data = {};
    await next(); // 执行下一中间件
});

// 路由为数组表示，该中间件适用于 user 和 timer 两个路由
app.router(['user', 'timer'], async (ctx, next) => {
    ctx.data.company = 'Tencent';
    await next(); // 执行下一中间件
});

// 路由为字符串，该中间件只适用于 user 路由
app.router('user', async (ctx, next) => {
    ctx.data.name = 'heyli';
    await next(); // 执行下一中间件
}, async (ctx, next) => {
    ctx.data.sex = 'male';
    await next(); // 执行下一中间件
}, async (ctx) => {
    ctx.data.city = 'Foshan';
    // ctx.body 返回数据到小程序端
    ctx.body = { code: 0, data: ctx.data};
});

// 路由为字符串，该中间件只适用于 timer 路由
app.router('timer', async (ctx, next) => {
    ctx.data.name = 'flytam';
    await next(); // 执行下一中间件
}, async (ctx, next) => {
    ctx.data.sex = await new Promise(resolve => {
    // 等待500ms，再执行下一中间件
    setTimeout(() => {
        resolve('male');
    }, 500);
    });
    await next(); // 执行下一中间件
}, async (ctx)=>  {
    ctx.data.city = 'Taishan';

    // ctx.body 返回数据到小程序端
    ctx.body = { code: 0, data: ctx.data };
});

return app.serve();

}

// 调用名为 router 的云函数，路由名为 user

wx.cloud.callFunction({

// 要调用的云函数名称

name: "router",

// 传递给云函数的参数

data: {

$url: "user", // 要调用的路由的路径，传入准确路径或者通配符*

other: "xxx"

}

});

{"_id":"19b1e8b9-2662-471e-9a2d-dfda08b8b50d","goodsType":"湿垃圾","goodsName":"猕猴桃"}

{"_id":"72eb8a02-53a6-450a-9588-37a4408a3ff3","goodsType":"湿垃圾","goodsName":"苹果"}

/**


成功调用
@param {*} ctx
@retuen

*/

const success = ctx => {

return {

code: 0,

message: 'success',

data: ctx.data

}

}

/**

调用失败
@param {*} ctx
@param {*} msg
@retuen

*/

const error = (ctx, msg) => {

return {

code: 400,

message: msg,

data: ctx.data

}

}

module.exports = {

success,

error

}

npm install --save tcb-router

// 云函数入口文件

const cloud = require('wx-server-sdk')

// 引入 tcb-router

const TcbRouter = require('tcb-router')

const returnUtil = require('utils/ReturnUtil.js')

// 初始化

cloud.init({

env: 'test-123'

})

// 获取数据库

const db = cloud.database();

// 操作 rubbish 集合公共部分

const rubbish_db = db.collection('rubbish');

// 云函数入口函数

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

const app = new TcbRouter({ event });

// app.use 表示该中间件会适用于所有的路由

app.use(async (ctx, next) => {

ctx.data = {};

await next(); // 执行下一中间件

});

/***************************    垃圾分类   *****************************************/

// 获取单个垃圾分类信息

app.router('getRubbish', async (ctx, next) => {

console.log(event)

let data = JSON.parse(event.data)

ctx.data = await rubbish_db.where({ goodsName:data.name }).get();

ctx.body = await returnUtil.success(ctx)

await next();

})
return app.serve();

}

{

// 路由

"$url": "getRubbish",

// 传递参数

"data":"{"name":"苹果"}"

}

{

// 路由

"$url": "getRubbish",

// 传递参数

"data":"{"name":"苹果"}"

}

// 配置请求公用参数

const config = {

// 网络请求

api_http_url: 'https://www.mxnzp.com/api',

// 云开发云函数

api_cloud_route:"rubbish"

}

// 导出配置文件

export { config }

import { config } from "../config.js"

class HTTP {
constructor() {

// 通过构造方法 实现 url 的赋值

this.api_http_url = config.api_http_url

}
//http请求

request(params) {
wx.request({
  url: this.api_http_url + params.url, // 接口地址拼装
  method: params.method,              // 接口类型 get/post/put/delete
  data: params.data,    // 传递给后台的参数
  header: {
    // 设置请求类型  
    'content-type': 'application/x-www-form-urlencoded'
  },
  success: (res) => {
    let code = res.data.code.toString()
    if (code.startsWith('1')) {
     // 将请求的参数回调给上层
      params.success(res)
    }

  },
  fail: (error) => {
    console.log(error)
  },
  complete: (res) => {
    
  }

})

}
}
export {

HTTP

}

// 导入配置文件

import { config } from "../config.js"

class CloudRequest{

constructor(){

this.api_cloud_route = config.api_cloud_route

}
request(params){
wx.cloud.callFunction({
  // 要调用的云函数名称
  name: this.api_cloud_route,
  // 传递给云函数的参数
  data: {
    // 要调用的路由的路径，传入准确路径或者通配符*
    $url: params.url, 
    // 请求参数
    data: JSON.stringify(params.data)
  },
  success: res => {
    // 结果回调  
    params.success(res)
  },
  fail: err => {
    console.log(err)
  }
})

}
}

export { CloudRequest }

// 导入封装的 http 请求

import { HTTP } from '../utils/http-request.js'

// 继承 HTTP 直接调用其方法

class IndexModel extends HTTP {

/**

查询垃圾分类信息
@param {*} callBack

*/

getRubbish(name,callback){

// http 请求

this.request({

url: "/rubbish/type", // 接口地址

data: {

name: name // 传递参数

},

// 接收  params.success(res) 回调参数

success: res => {

// 将数据再次回调

callback(res)

}

})

}

}
export { IndexModel }

// 第一步：导入

import { IndexModel } from '../../models/indexModel.js'

// 第二步：实例化

let indexModel = new IndexModel()

/ 第三步：调用方法，参数和方法中一一对应 res 接收callback回调参数

indexModel.getRubbish("苹果",res=>{

console.log(res)

this.setData({

httpItem:res.data.data.aim

})

})

 <group-comp title="网络请求"></group-comp>

<view class="http-container ">

<view class="http-item">{{httpItem.goodsName}} : {{httpItem.goodsType}}</view>

</view>

// 导入封装的 http 请求

import { CloudRequest } from '../utils/cloud-request.js'

// 继承 CloudRequest 直接调用其方法

class IndexCloudModel extends CloudRequest {

/**

查询垃圾分类信息
@param {*} callBack

*/

getRubbish(name,callBack) {

this.request({

url: "getRubbish",

data:{name:name},

success: res => {

callBack(res)

}

})

}

}
export { IndexCloudModel }

// 第一步：导入

import { IndexCloudModel } from '../../models/indexCloudModel.js'

// 第二步：实例化

let indexCloudModel = new IndexCloudModel()

/ 第三步：调用方法，参数和方法中一一对应 res 接收callback回调参数

indexCloudModel.getRubbish("猕猴桃",res=>{

console.log(res)

this.setData({

cloudItem: res.result.data.data[0]

})

})	

<group-comp title="云函数请求" ></group-comp>

<view class="http-container ">

<view class="http-item">{{cloudItem.goodsName}} : {{cloudItem.goodsType}}</view>

</view>

{

// triggers 字段是触发器数组，目前仅支持一个触发器，即数组只能填写一个，不可添加多个

"triggers": [

{

// name: 触发器的名字，可以随意更改，规则见给出的官方链接

"name": "myTrigger",

// type: 触发器类型，目前仅支持 timer (即 定时触发器)

"type": "timer",

// config: 触发器配置，在定时触发器下，config 格式为 cron 表达式，规则见官方链接

"config": "0 0 2 1 * * "

}

]

}

{

"triggers": [

{

"name": "trigger",

"type": "timer",

"config": "/10 * * * * * *"

}

]

}

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init()
// 云函数入口函数

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

const wxContext = cloud.getWXContext()

console.log("每十秒触发器执行一次测试。。。")
}