第一章总结

江西鹏于晏

于 2024-03-03 18:42:51 发布

阅读量567

点赞数 10

文章标签：微信小程序

本文链接：https://blog.csdn.net/2402_83155274/article/details/136435554

版权

认识微信小程序
简介：微信是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序。小程序、订阅号、服务号、企业微信属于微信公众平台的四大生态体系，它们面向不同的用户群体，应用于不同的方向和用途。

特征：

1.无须安装 2.触手可及 3.用完即走 4.无须卸载

特点：

1.简单的业务逻辑 2.低频度的使用场景

第一个微信小程序

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Component({
  data: {
    motto: 'Hello World',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs'
      })
    },
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    onInputChange(e) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
  },
})

{
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {}
}

<view class="weui-navigation-bar {{extClass}}">
  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
 
    <!-- 左侧按钮 -->
    <view class='weui-navigation-bar__left' style="{{leftWidth}};">
      <block wx:if="{{back || homeButton}}">
        <!-- 返回上一页 -->
        <block wx:if="{{back}}">
          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
            <view
              bindtap="back"
              class="weui-navigation-bar__btn_goback_wrapper"
              hover-class="weui-active"
              hover-stay-time="100"
              aria-role="button"
              aria-label="返回"
            >
              <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
            </view>
          </view>
        </block>
        <!-- 返回首页 -->
        <block wx:if="{{homeButton}}">
          <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
            <view
              bindtap="home"
              class="weui-navigation-bar__btn_home_wrapper"
              hover-class="weui-active"
              aria-role="button"
              aria-label="首页"
            >
              <view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
            </view>
          </view>
        </block>
      </block>
      <block wx:else>
        <slot name="left"></slot>
      </block>
    </view>
 
    <!-- 标题 -->
    <view class='weui-navigation-bar__center'>
      <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
        <view
          class="weui-loading"
          aria-role="img"
          aria-label="加载中"
        ></view>
      </view>
      <block wx:if="{{title}}">
        <text>{{title}}</text>
      </block>
      <block wx:else>
        <slot name="center"></slot>
      </block>
    </view>
    
    <!-- 右侧留空 -->
    <view class='weui-navigation-bar__right'>
      <slot name="right"></slot>
    </view>
  </view>
</view>

.weui-navigation-bar {
  --weui-FG-0:rgba(0,0,0,.9);
  --height: 44px;
  --left: 16px;
}
.weui-navigation-bar .android {
  --height: 48px;
}
 
.weui-navigation-bar {
  overflow: hidden;
  color: var(--weui-FG-0);
  flex: none;
}
 
.weui-navigation-bar__inner {
  position: relative;
  top: 0;
  left: 0;
  height: calc(var(--height) + env(safe-area-inset-top));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  width: 100%;
  box-sizing: border-box;
}
 
.weui-navigation-bar__left {
  position: relative;
  padding-left: var(--left);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
}
 
.weui-navigation-bar__btn_goback_wrapper {
  padding: 11px 18px 11px 16px;
  margin: -11px -18px -11px -16px;
}
 
.weui-navigation-bar__btn_goback_wrapper.weui-active {
  opacity: 0.5;
}
 
.weui-navigation-bar__btn_goback {
  font-size: 12px;
  width: 12px;
  height: 24px;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: var(--weui-FG-0);
}
 
.weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex: 1;
  height: 100%;
}
 
.weui-navigation-bar__loading {
  margin-right: 4px;
  align-items: center;
}
 
.weui-loading {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: block;
  background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
  background-size: 100%;
  margin-left: 0;
  animation: loading linear infinite 1s;
}
 
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

开发工具界面功能介绍
1.工具栏 2.模拟区 3.目录文件夹 4.编辑区

5.调试区

Console面板 Sources面板 Security面板 Storage面板 AppData面板

Wxml面板 Sensor面板 Trace面板扩展菜单

江西鹏于晏

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
第一章总结

简介：微信是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信服务的应用程序。小程序、订阅号、服务号、企业微信属于微信公众平台的四大生态体系，它们面向不同的用户群体，应用于不同的方向和用途。Console面板 Sources面板 Security面板 Storage面板 AppData面板。1.工具栏 2.模拟区 3.目录文件夹 4.编辑区。开发工具界面功能介绍。
复制链接

扫一扫