微信小程序：有张简历 -- 小总结

Bertha 。 2022-02-25 03:46 201阅读 0赞

趁着短暂休息的几天 ，简单撸一个微信小程序 ，先看看效果图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 2][]

当然 ， 以上只是效果图~~~~ ， 源码完成后会上传到Github ， 看到的大佬能不能指导下**完全没有后台服务器的情况**下怎么通过纯小程序组件实现MQ或者websocket功能，小程序的圈子生态并没有想象的好 ， 即时聊天的实现毫无头绪。。。

# 以下是主要的笔记, 后续会继续完善   微信小程序API #

## 基础点 ##

##### 1 > 小程序主体 #####

> app . js  
> app . json : 公共配置类 , 可配置全局消息  
> app . wxss : 公共样式表

##### 2 > 单个页面主体 #####

> js : 页面逻辑  
> wxml : 类似于HTML , 页面DOM  
> json : 页面配置文件  
> wxss : 页面样式表

##### 3 > app . json 简述 #####

> [https://developers.weixin.qq.com/miniprogram/dev/framework/config.html\#全局配置][https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]  
> 该 文件用于 配置小程序全局配置 , 详细可见API文档 , 主要包括小程序所有的页面路径 , 底部Tab 的设置 , 网络连接 , 是否开发模式 等

## 组件列表 ##

> [https://developers.weixin.qq.com/miniprogram/dev/component/][https_developers.weixin.qq.com_miniprogram_dev_component]  
> 常见的包括 cemera , map , canvas 等  
> open-data : 开放信息 , 包括用户昵称 , 头像 , 性别 ,城市等  
>

## API 列表 ##

*  boolean wx.canIUse(string schema) : 判断当前API 是否可用

## 关键字 ##

#### wx : for ####

> 绑定一个数组 , 其下 \{ \{index\}\} 是当前项的下标变量名 , 当前项默认为item  
> 自定义下标名 和 对象名  
> < view wx:for="\{ \{array\}\}" wx:for-index=“idx” wx:for-item=“itemName”>  
> 可以在 wx : for 中 嵌套 wx : for

#### wx : if ####

> 条件渲染 , 判断是否渲染此代码块 ,  
> 可以 使用 wx : elif 和 wx : else 来进行 if else 判断

#### block ####

> block 用于包含 , 判断之后 , 对block 中的均起作用

#### 定义模板 ####

> 使用 template 标签定义模板  
> 模板的作用域 是 data 中定义定义的数据 以及 模板定义文件中定义的模板

<template name="msgItem">
      <view>
        <text>{
       {index}}: {
       {msg}}</text>
        <text>Time: {
       {time}}</text>
      </view>
    </template>
    
    //模板使用 : 
    <template is="msgItem" data="{
       {...item}}" />
    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

## 事件 ##

> 常见事件  
> touchstart / touchmove / touchcancel ( 触摸被打断 ) / touchend  
> tap ( 触摸后马上离开 ) / longpress ( 超过350ms 后离开 )  
> transitionend / animationiteration ( 动画迭代时 ) / animationend  
> touchforcechange ( 重按时 )

> 可以将事件绑定在组件上 ( 例如 : bindtap )  
> \- - > Click me!  
> wxs 函数响应事件 , wxs 函数包含两个参数 , event 和 ownerInstance

<wxs module="wxs" src="./test.wxs"></wxs>
    <view id="tapTest" data-hi="WeChat" bindtap="{
       {wxs.tapName}}">Click me!</view>
    function tapName(event, ownerInstance) {
      console.log('tap wechat', JSON.stringify(event))
    }
    module.exports = {
      tapName: tapName
    }

> bind 事件绑定不会阻止冒泡事件向上冒泡  
> catch 事件绑定可以阻止冒泡事件向上冒泡

## 常见用法 ##

##### 1 > 数据绑定 #####

<view>{
       { message }}</view>
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

##### 2 > 组件属性 #####

<view id="item-{
       {id}}"></view>
    Page({
      data: {
        id: 0
      }
    })

##### 3 > 控制属性 , 即 if 使用 #####

<view wx:if="{
       {condition}}"></view>
    Page({
      data: {
        condition: true
      }
    })

##### 4 > \{ \{\}\} 中简单运算 #####

<view hidden="{
       {flag ? true : false}}">Hidden</view>
    <view>{
       {a + b}} + {
       {c}} + d</view>
    <view wx:if="{
       {length > 5}}"></view>
    <view>{
       {"hello" + name}}</view>
    <view>{
       {object.key}} {
       {array[0]}}</view>

##### 5 > 顶部导航栏名称 #####

wx.setNavigationBarTitle({
      title: '有张名片'
    })

##### 6 > 顶部导航栏样式 #####

wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#35477D',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })

##### 7 > 调用函数阻止冒泡 #####

– > catchtap=‘showscanfun’

##### 8 > 扫一扫 #####

wx.scanCode({
          success(res) {
            console.log(res)
          }
        });

##### 9 > 转发 #####

##### 10 > 微信小程序实现二维码生成 #####

– > 参考 [https://github.com/black-ant/weapp-qrcode][https_github.com_black-ant_weapp-qrcode]

11 > 查询数据

findUserBase: function () {
        const db = wx.cloud.database();
        // 进入查询后this 指向的对象不一样
        let that = this;
        db.collection('database').where({
        }).get({
          success(res) {
            // 输出 [{ "title": "The Catcher in the Rye", ... }]
            console.log("查询数据 :测试");
            console.log(res);
            that.data.userarray = res.data;
            //区别setDate 和 this . data . userarray  , 前者会刷新视图
            that.setData({
              userarray: that.data.userarray,
            });
          }
        });
      },

### 自定义导航栏 ###

– > [https://blog.csdn.net/weixin\_38323736/article/details/78723853][https_blog.csdn.net_weixin_38323736_article_details_78723853]

//页面
      <view class="buttom">
        <import src="/pages/template/template.wxml" />
        <template is="tabBar" data="{
       {tabBar:bindData.tabBar}}" />
      </view>
    
    
    //页面js
    //test.js
    //获取应用实例
    var app = getApp()
    var template = require('../template/template.js');
    
    Page({
      data: {
      },
      onLoad: function() {
        console.log('onLoad test');
        template.tabbar("tabBar", 0, this) //0表示第一个tabbar
      }
    });
    
    
    //Template.js
    //初始化数据
    function tabbarinit() {
      return [{
          "current": 0,
          "pagePath": "/pages/card/card",
          "icon": "/imgs/home.png",
          "tabtype": "left",
          "icon": "icon-demo17  ",
          "text": "主页"
        },
        {
          "current": 0,
          "pagePath": "/pages/cardlist/cardlist",
          "tabtype": "center",
          "icon": "icon-mingpianjia",
          "text": "名片夹"
    
        },
        {
          "current": 0,
          "pagePath": "/pages/msg/msg",
          "tabtype": "right",
          "icon": "icon-xiaoxi",
          "text": "消息"
        }
      ]
    
    }
    //tabbar 主入口
    function tabbarmain(bindName = "tabdata", id, target) {
      var that = target;
      var bindData = {};
      var otabbar = tabbarinit();
      otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath'] //换当前的icon
      otabbar[id]['current'] = 1;
      bindData[bindName] = otabbar
      that.setData({
        bindData
      });
    }
    
    module.exports = {
      tabbar: tabbarmain
    }
    
    
    <template name="tabBar">
      <view class="tabBar">
        <block wx:for="{
       {tabBar}}" wx:for-item="item" wx:key="tabBar">
          <view  class="tabBar-item {
       {item.tabtype}}">
            <navigator open-type="redirect" url="{
       {item.pagePath}}">
              <view class="icon-view">
                <text class="iconfont {
       {item.icon}}"></text>
              </view>
              <view class="tab-text {
       {item.current== 1 ? 'tabBartext' :''}}">{
       {item.text}}</view>
            </navigator>
          </view>
        </block>
      </view>
    </template>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190331175317456.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190331175433399.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 2]: /images/20220225/e375f54f697a41938b36a464b7abfa5f.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[https_github.com_black-ant_weapp-qrcode]: https://github.com/black-ant/weapp-qrcode
[https_blog.csdn.net_weixin_38323736_article_details_78723853]: https://blog.csdn.net/weixin_38323736/article/details/78723853