• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序入门八头像上传

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

上一章介绍了微信小程序入门七登录注册,这章谈谈头像的选择,上传,预览以及后台服务端代码的功能。本章节主要用的知识点有

1. action-sheet 底部弹出可选菜单组件

2. wx.uploadFile 将本地资源上传到服务器

3. wx.chooseImage 从本地相册选择图片或使用相机拍照。

4. wx.previewImage 预览图片

效果图:


wxml代码:

[html] view plain copy
 
  1. <!--  
  2. 变量说明:  
  3. windowHeight :设备的窗口的高度  
  4. windowWidth : 设备的窗口的宽度  
  5. actionSheetHidden : 组件是否显示  
  6. actionSheetItems :组件菜单项  
  7. -->  
  8. <view class="page__bd" style="height: {{windowHeight * 0.8}}px; width: {{windowWidth}}px;">  
  9.     <view class="weui-cells weui-cells_after-title me-info"  
  10.     style="top:{{windowHeight * 0.4}}px;">  
  11.         <view class="weui-cell">  
  12.             <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">  
  13.                 <image src="{{userImg}}" style="width: 50px; height: 50px; display: block;border-radius:25px;" bindtap="clickImage"/>  
  14.             </view>  
  15.             <view class="weui-cell__bd">  
  16.                 <navigator url="../login/login" >  
  17.                 点击登录</navigator>  
  18.                 <view style="font-size: 13px;color: #888888;">摘要信息</view>  
  19.             </view>  
  20.         </view>  
  21.         <view class="weui-cell weui-cell_access">  
  22.             <view class="weui-cell__bd">  
  23.                 <view style="display: inline-block; vertical-align: middle">发布博客</view>  
  24.             </view>  
  25.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  26.         </view>  
  27.         <view class="weui-cell weui-cell_access">  
  28.             <view class="weui-cell__bd">  
  29.                 <view style="display: inline-block; vertical-align: middle">信息列表</view>  
  30.                 <view class="weui-badge" style="margin-left: 5px;">8</view>  
  31.             </view>  
  32.             <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>  
  33.         </view>  
  34.         <view class="weui-cell weui-cell_access">  
  35.             <view class="weui-cell__bd">  
  36.                 <view style="display: inline-block; vertical-align: middle">个人资料</view>  
  37.             </view>  
  38.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  39.         </view>  
  40.         <view class="weui-cell weui-cell_access">  
  41.             <view class="weui-cell__bd">  
  42.                 <view style="display: inline-block; vertical-align: middle">设置</view>  
  43.             </view>  
  44.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  45.         </view>  
  46.     </view>  
  47.     <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">  
  48.         <block wx:for="{{actionSheetItems}}" wx:key="unique">  
  49.             <action-sheet-item bindtap="{{item.bindtap}}">{{item.txt}}</action-sheet-item>  
  50.         </block>  

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-slot插槽功能发布时间:2022-07-18
下一篇:
微信小程序(7)--微信小程序连续旋转动画发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap