1 Star 0 Fork 1

dorlolo / 微信小程序_人力资源中介平台

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
BSD-3-Clause

云开发 quickstart

这是云开发的快速启动指引,其中演示了如何上手使用云开发的三大基础能力:

  • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 文档型数据库
  • 文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
  • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码

参考文档

需确认的问题

  1. 功能接口,实名认证、短信验证功能费用。
  2. 劳务人员个人可以申请多个 - √
  3. 公司工时单独改 - √
  4. 部署上线
  5. 后期维护

注意事项

  1. wx.showToast的icon参数没有"error"属性,与官方文档不一致。

登陆与注册页面

  • [ x ] 自动登陆页面
  • [ x ] 手动登陆页面

注册页面

  • [ x ] 验证码输入界面
  • MD5加密

忘记密码页面

  • 手机号码+图形码验证界面
  • 短信验证界面
  • 修改密码界面

特殊要求

  • 身份证实名认证接口
  • 短信验证接口

其它

  • 云服务图片数量限制住,避免超容量。
  • 尽量使用本地缓存,减少流量消耗。
  • index首次登陆,出现欢迎提示

主页

头元素

  • 位置选择
  • 搜索

轮播宣传画

  • 元素显示内容
  • [ x ] 轮播页设置界面

bug

  • [ X ] 轮播图在手机上不显示,页面只存在一个轮播图是正常的
  • [ X ] page中css元素样式问题,把display部分注释掉解决了
  • [ ] 手机上显示的轮播图宽度不够
  • [ ] 职位信息的薪资字体无法更改

个人中心

通用

  • [ ] 个人信息查看编辑
  • [ ] 上下线查看与管理

劳务人员

  • [ ] 邀请码
  • [ ] 我的通知
  • [ ] 我的收藏
  • [ ] 申请记录
  • [ ] 我的供应商

供应商

  • [ ] 我的通知
  • [ ] 我的收藏
  • [ ] 申请记录
  • [ ] 我的奖励金
  • [ ] 我的下线

管理员

  • [ ] 我的通知
  • [ ] 管理员偏好设置(设置默认参数)

职位和公司信息管理

职位包括公司信息

  • [ ] 职位展示
  • [ X ] 职位搜索
  • [ ] 职位编辑
  • [ ] 供应商管理
  • [ ] 定期结算

wxss重点参数摘要

使背景色覆盖整个画面(一级父标签必备)

.page{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

强制修改css样式

.confirmPsdText{
  font-weight: 10 !important;
}

子元素底部对齐

  1. 父元素
.farther{
position:relative;
}
  1. 子元素
.child{
position:absolute;
bottom:0;
}

修改按钮禁用时的样式

button[disabled]{
  background: rgb(126, 146, 137)!important;
  color: black!important;
}

底部阴影

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

js常用功能

switch

switch (表达式) {
  case 变量:
    语句;
  case 数字:
    语句;
    break;
  case 字符串:
    语句;
    break;
  default:
    语句;
}

ES6字符串转义,变量提取

let mode=0;
console.log(`mode is ${mode}`);

ES6变量提取

let data={a:1,b:2};
let {c,d}=data;
console.log(c,d);

wxml中常用方法

blcok 块元素

以下代码的最外层可以替换为block元素,因为view每次需要渲染,和块不需要

<view wx:for="{{show}}">
  <view>
    <text>{{item}}</text>
  </view>
<view>

图片显示

  1. 注意!, 显示图片的代码为<image src=""></image>,不是<img src=""></img>,已经坑了自己两次了;
  2. 图片不显示的问题的两种解决方案,推荐第二种
    (1) 图片样式中的宽高不能使用百分比,必须指定实际尺寸,不然不显示(即使父元素指定了宽高,图片还是不能用百分比);
    (2) 父元素指定高度(可以使用百分比),图片填充模式选widthFix
    (3) 继续(2)中的说明,通过父元素的css样式,指定父元素中的图片大小
  .publicitySwiper{
   height:100%;
   border-bottom: yellow 1px solid;
 }
 .publicitySwiper image{
   width: 100%;
   height: 98%;
 }
  1. 图片可以

    使用本地地址

    网络地址

    .网上说的本地图片需要使用base64转码这个说法不对;
  2. 保存于读取微信头像示例
getWxInfo(e){
  let headImg = e.detail.userInfo.avatarUrl
}

轮播图设置技巧

  1. 指定高度,里面的图片缩放模式使用

    widthFill

    即可

wx:if

<view wx:if="{{ !a }}">逻辑非</view>
<view wx:if="{{ a || b }}">逻辑或</view>
<view wx:if="{{ a && b }}">逻辑与</view>
<view wx:if="{{ a > 5 }}">6</view>
<view wx:elif="{{ a < 5 }}">4</view>
<view wx:else>5</view>

wx:for

  1. item.isToday是dateArr中的子元素
<view wx:for='{{dateArr}}'  class='{{item.isToday}}'></view>
  1. 添加

    wk:key='循环中的参数'

    可以增加读取效率,可以理解为用数组中的哪个参数进行排序,如果没有需要设置的参数,可设置为

    key="*this"

<view wx:for='{{dateArr}}' key="*this"  class='{{item.isToday}}'></view>

给元素添加属性 : data- 方法

以下案例在点击事件获取后,date参数一般在e.currentTarget.dataset.date,或是e.target.dataset中

<view data-date='19:30' ></view>

注意: data-方法指定的参数,所有大写字母会变为小写。如需赋值属性时goHome,那么应该设置为data-go-home,h在读取时会变为大写。

赋值时的判断

<!-- 基本用法 -->
<view class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>
<!-- 多条件判断 -->
<view class='{{conId==0?'orange':(conId==1?'blue':'purple')}}'>

js常用方法

两个页面之间的传值

//将值赋值给上一页的data,相当于在上一页使用的this.setData
prevPage.setData({
  choice_time: dateList
})
//返回上一页
wx.navigateBack({
  delta: 1
})

调用自定义组件/插件的函数

let searchBar = this.selectComponent('#search-bar');//指向wxml文件中 自定义组件的id
searchBar.clearInput();//clearInput为自定义组件中的函数

压缩图片并转码为base64格式

  1. 使用canvas压缩,html页面添加如下代码
<canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
  1. js中设置canvas的宽高
data: {
    cWidth: 0,
    cHeight : 0,
  },
  1. js中使用如下代码压缩并提取文件
wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album'],
      success(res) {
        let imgurl = res.tempFilePaths[0]
        wx.getImageInfo({
          src: imgurl,
          success: function(res){
            //---------利用canvas压缩图片--------------
            var ratio = 2;
            var canvasWidth = res.width //图片原始长宽
            var canvasHeight = res.height
            while (canvasWidth > 400 || canvasHeight > 400){// 保证宽高在400以内
                canvasWidth = Math.trunc(res.width / ratio)
                canvasHeight = Math.trunc(res.height / ratio)
                ratio++;
            }
            that.setData({
                cWidth: canvasWidth,
                cHeight: canvasHeight
            })

            //----------绘制图形并取出图片路径--------------
            var ctx = wx.createCanvasContext('canvas')
            ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
            ctx.draw(false, setTimeout(function(){
                 wx.canvasToTempFilePath({
                     canvasId: 'canvas',
                     destWidth: canvasWidth,
                     destHeight: canvasHeight,
                     success: function (res) {
                         let imgpath=res.tempFilePath //这里去除压缩后的图片
                         //..到此图片压缩结束,这里可添加转为base64的代码
                         //
                         //
                         //
                     },
                     fail: function (res) {
                         console.log(res.errMsg)
                    }
                })
            },100))    //留一定的时间绘制canvas


          }
        })
      }
    })
  1. 图片转码为base64
wx.getFileSystemManager().readFile({
  filePath: imgpath, //选择图片路径
  encoding: 'base64', //编码格式
  success: res => { //成功的回调
    console.log('data:image/png;base64,' + res.data)
    that.data.comEdit.comImg='data:image/png;base64,' + res.data
  }
})

本地使用云数据库

注意事项

  1. 需要把数据库界面,把数据权限改为所有人才行

云函数

主要用来大批量获取数据库数据并返回

能不用就不要用云函数,踩不完的坑!

关于云函数调用失败的问题

  1. 没有登陆。点击左上角的头像先登录
  2. 在每个函数根目录安装ex-server-sdk
npm install -save wx-server-sdk@latest

关于本地调试调用失败的问题

  1. 遇到一次函数内容写错的导致的,看弹窗报错例的具体内容。

await 在新版本无法使用,会报错。云函数使用此模板

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db=cloud.database();
const _=db.command;
// 云函数入口函数
exports.main = async (event, context) => new Promise((resolve, reject) =>{
  
  // 在1.5 秒后返回结果给调用方(小程序 / 其他云函数)
  setTimeout(() => {
    resolve(returnInfo)//返回结果在前端的res.result里面
  }, 1500)
})

.then中使用return函数的问题

  1. .then中使用return表示退出.then函数,并非返回数据。
  2. 如果要返回数据,需要写在.then函数下方。并且可能还得加上setTimeout函数延时返回数据,否则可能返回的是空数据。

数据库获取方便阅读的写法

db.colletion(集合名).get().then(res=>{
  //....数据库调用成功的代码写这里
}).then(res=>{
  //....如果上一个then中的又调用了db数据库,并且成功了,后续代码可以写这里。.then可以循环叠加
}).cath(=>err{
  //....处理返回错误的结果
})

读取数据库内容 ES6方法

db.collection('Data_User').where({
        PHONE:"13962310765"
      }).get().then(res => {
        return res.data;
      })
//注意,数据在res的data集合中。

添加数据到数据库

await db.collection("库名").add({
              data:{
                //....
              }
              }).then(res=>{
                //....
              })

vant插件使用记录

css样式引入问题

导入css样式不能使用官方文档的方法,需要使用

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';

uploader上传组件使用问题

官方文档有坑

<!-- html -->
<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" max-count="{{3}}" 
bind:after-read="afterRead" bind:delete="imgdelte" />

fileList变量名是固定的,更改会报错。

data: {
  fileList:[]//子元素为字典形式的,格式为{url:"..."}
}

deletable为可删除 max-count为最大图片可选数量,这才是正确的参数 after-read为选择图片后的触发事件

  //图片选择后获取临时路径并上传
  afterRead(event) {
    const { file } = event.detail;
    console.log('获取临时文件 file:',file.url)
    // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
    this.data.fileList.push({url:file.url,deletable: true,})
    this.data.comEdit.img_num=this.data.fileList.length
    console.log(this.data.fileList)
    this.setData({
      fileList:this.data.fileList,
      comEdit: this.data.comEdit
    })
  },

delete为触发图片删除事件

 //------图片删除事件
  imgdelte(event){
    let index=event.detail.index
    this.data.fileList.splice(index,1)
    this.data.comEdit.img_num=this.data.fileList.length
    this.setData({
      fileList:this.data.fileList,
      comEdit: this.data.comEdit
    })
  },

设置后,插件会遍历fileList中的url,把图片全部显示出来。手动选择完图片会出来缩略图,达到最大选择数量胡隐藏选择器。


腾讯云短信验证 操作

获取账号密钥——CAM 控制台密匙

1. 登陆以下页面获取CAM密钥(最好使用子账户的CAM密钥)

https://console.cloud.tencent.com/cam/capi

2. 创建子账户的方法

登陆后,点击左侧导航中的【用户】——【用户列表】——主页面中点击【新建用户】——【快速创建(推荐)】—— 填写用户名后 点击【创建用户】。
务必注意系统自动生成的密码比较复杂,点击右侧【发送】按钮,把密码发送到邮箱。如果没有发送在用户列表中点击密码重置。(子账户首次登陆时会提示修改密码.)

3. 修改子账户的密码设置规则

左侧导航栏中,点击【用户】——【用户设置】,按自己需求定义即可。

4. 子用户登录使用如下地址

https://cloud.tencent.com/login/subAccount/100006684481?type=subAccount 登陆后选中【登陆其它账号】—— 填写账号密码登陆即可

5. 登陆后,复制1章节的网页,即可获取CAM码。

我的CAM码

appId:1300230822 SecretId: AKIDylW7YmAwJRYCwRwQovorTTj5Rknt9QqH SecretKey: KZaLrDI1d8VWHmzwpjOlrhIfkr4DkbCb

登陆腾讯云短信验证码平台创建短信模板

地址: https://console.cloud.tencent.com/smsv2/csms-sign

创建签名和短信模板

  1. 左侧导航栏,依此选中【国内短信】——【签名管理】——【创建签名】
  2. 左侧导航栏,依此选中【国内短信】——【正文模板管理】——【创建正文模板】
  3. 等待审核通过,需要用到

安装短信平台sdk

官方文档:https://cloud.tencent.com/document/product/382/43197

  1. 开发工具中创建短信发送云函数
  2. 开发工具中打开终端,使用cd 命令切换到云函数根目录下
  3. 使用以下命令安装sdk
npm install tencentcloud-sdk-nodejs --save

如果下载速度慢就用文档中的其它方法

BSD 3-Clause License Copyright (c) 2021, drololo All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

简介

人力资源推荐平台测试版 展开 收起
JavaScript
BSD-3-Clause
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/drololo/weapp_xa.git
git@gitee.com:drololo/weapp_xa.git
drololo
weapp_xa
微信小程序_人力资源中介平台
master

搜索帮助