精华内容
下载资源
问答
  • 小程序的跳转页面的链接,放入JS中的 data 数据。wxml中通过使用wx:for 实现入口模块跳转问题。 HTML: <view class='service'> <view class='service-title'>我的服务</...

    通常我们的个人中心页面,都具备有其他模块的入口方式。入口方式主要有以下两种:

    例如:

    将小程序的跳转页面的链接,放入JS中的 data  数据。wxml中通过使用wx:for 实现入口模块跳转问题。

    HTML:

    <view class='service'>
        <view class='service-title'>我的服务</view>
        <view class='icons'>
          <block wx:for="{{list}}" wx:key="{{index}}">
            <view class='user-item' bindtap='toMyMore' data-url='{{item.url}}'>
              <button open-type="{{item.url}}" class='button'>
                <image src='{{item.img}}' class='list-icon'></image>
                <view class='list-title'>{{item.title}}</view>
              </button>
            </view>
          </block>
        </view>
      </view>

    JS:

    toMyMore(event){
        let url = event.currentTarget.dataset.url
        if(url){
          wx.navigateTo({
            url: url,
          })
        } else {
          wx.showModal({
            title: '提示',
            content: '功能还在开发中....',
          })
        }
        
      },

    CSS:

    .order-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 20rpx;
      border-radius: 50%;
      vertical-align: middle;
    }
    
    .order-title {
      font-size: 28rpx;
      width: 100%;
      vertical-align: middle;
    }
    
    .list-icon {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
    }
    
    .list-title {
      font-size: 28rpx;
      width: 100%;
      margin-top: 8rpx;
    }
    
    .all-order {
      color: #999;
      font-size: 28rpx;
    }
    
    .order {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: calc(100% - 20rpx);
      height: 94rpx;
      line-height: 94rpx;
      padding: 0 20rpx;
      margin: 10rpx;
      box-sizing: border-box;
      border-radius: 6rpx;
      background-color: #fff;
    }
    
    .service {
      width: calc(100% - 20rpx);
      margin: 10rpx;
      background-color: #fff;
    }
    
    .service-title {
      width: 100%;
      height: 82rpx;
      line-height: 82rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      color: #333;
      font-size: 32rpx;
      border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
    }
    
    .service .icons {
      display: inline-flex;
      flex-direction: row;
      /* 自动换行 */
      flex-wrap: wrap;
      width: 100%;
    }
    
    .service .icons .user-item {
      width: 25%;
      height: 156rpx;
      padding-top: 24rpx;
      text-align: center;
      border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
    }
    
    .button {
      border: none;
      outline: none;
      background: transparent;
      margin: 0;
      padding: 0;
      line-height: 44rpx;
      padding-bottom: 46rpx;
    }
    
    .button::after {
      border: none;
    }

    JS:

    list: [
          {
            img: '../../images/mine/sunburn@2x.png',
            title: '晒单',
            url: '../sunburn/sunburn'
          },
          {
            img: '../../images/mine/address@2x.png',
            title: '地址管理',
            url: '../address/address'
          },
          {
            img: '../../images/mine/wardrobe@2x.png',
            title: '衣橱',
            url: '../wardrobe/wardrobe'
          }, 
          {
            img: '../../images/mine/coupons@2x.png',
            title: '优惠券',
            url: '',
          },
          {
            img: '../../images/mine/service@2x.png',
            title: '客服',
            url: 'contact'
          },
          {
            img: '../../images/mine/feedback@2x.png',
            title: '意见反馈',
            url: 'feedback'
          }
        ]

     

    展开全文
  • 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 ...2、个人中心页面布局 一、实现微信授权并获取用户信息 mine.js onLoad: function () { if (app.globalData.userInfo) { this.setData({ ...

    IT实战联盟博客:http://blog.100boot.cn

    上一篇:微信小程序微商城(八):缓存实现商品购物车功能

    看效果

     

     

    开发计划

    1、实现微信授权并获取用户信息
    2、个人中心页面布局

    一、实现微信授权并获取用户信息

    mine.js

    onLoad: function () {    
        if (app.globalData.userInfo) {      
            this.setData({        
            userInfo: app.globalData.userInfo,        
            hasUserInfo: true
          })
        } else if (this.data.canIUse) {      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {        this.setData({          userInfo: res.userInfo,          hasUserInfo: true
            })
          }
        } else {      // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({        success: res => {
              app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true
              })
            }
          })
        }
      },  
    getUserInfo: function (e) {    
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo    
        this.setData({      
            userInfo: e.detail.userInfo,      
            hasUserInfo: true
        })
      }

    二、实现微信授权并获取用户信息

    mine.wxml

    <view class="userinfo">
      <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn"> 点击微信授权 </button>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block></view><view class="separate"></view><view class="order" catchtap="toOrder">
      <text class="myorder-text">我的订单</text>
      <text class="myorderlook-text">查看全部订单</text></view><view class="line"></view><view class="navs">
      <block wx:for-items="{{orderItems}}" wx:key="name">
        <view class="nav-item" catchtap="toOrder" data-type="{{item.name}}" data-typeid="{{item.typeId}}">
          <image src="{{item.imageurl}}" class="nav-image" />
          <text>{{item.name}}</text>
        </view>
      </block></view><view class="separate"></view><view class="person-list">
    
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_card.png"></image>
        <text class="item-text">优惠券</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_favorite.png"></image>
        <text class="item-text">我的收藏</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_site.png"></image>
        <text class="item-text">收货地址</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_sale_record.png"></image>
        <text class="item-text">售后记录</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_evaluated.png"></image>
        <text class="item-text">我的评价</text>
      </view>
      <view class="person-line"></view>
      <view class="list-item">
        <image class="item-image" src="../../images/person/personal_customer.png"></image>
        <text class="item-text">在线客服</text>
      </view></view><view class="separate"></view>

    mine.wxss

    .userinfo {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        background: #f0145a;   
        width: 100%; 
        height: 300rpx;
    }
    .userinfo-btn{  
        margin-top: 50rpx;  
        background: none !important;  
        color: #fff !important;  
        font-size: 40rpx;
    }
    .account-bg {  
        width: 100%;  
        height: 150rpx;
    }
    .userinfo-avatar {  
        width: 108rpx;  
        height: 108rpx;  
        margin: 40rpx;  
        border-radius: 50%;
    }
    .userinfo-nickname {  
        color: #fff;
    }
    /* 订单 */
    .order {  
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        width: 100%;  
        height: 90rpx;
    }
    .myorder-text {  
        font-size: 34rpx;  
        color: gray;  
        margin: 20rpx;  
        width: 40%;
    }
    .myorderlook-text {  
        font-size: 32rpx;  
        color: gray;  
        position: relative;  
        right: 20rpx;  
        width: 60%;  
        text-align: right;
    }
    .next-image {  
        width: 20rpx;  
        height: 25rpx;  
        position: relative;  
        right: 10rpx;
    }
    .navs {  
        display: flex;
    }
    .nav-item {  
        width: 25%;  
        display: flex;  
        align-items: center;  
        flex-direction: column;  
        padding: 20rpx;
    }
    .nav-item .nav-image {  
        width: 55rpx;  
        height: 55rpx;  
        margin: 5rpx;
    }
    .nav-item text {  
        margin-top: 20rpx;  
        font-size: 28rpx;  
        color: gray;
    }
    /* 列表 */
    .person-list {  
        display: flex;  
        flex-direction: column;  
        align-items: left;
    }
    .list-item {      
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        height: 80rpx;
    }
    .item-image {  
        width: 40rpx;  
        height: 40rpx;  
        margin: 20rpx;
    }
    .item-text {  
        color: gray;  
        font-size: 30rpx;  
        margin-left: 20rpx;
    }
    .person-line {  
        width: 80%;  
        height: 2rpx;  
        background: lightgray;  
        margin-left: 90rpx;
    }

    mine.js

    var app = getApp()
    Page({  
        data: {    
            userInfo: {},    
            hasUserInfo: false,        
            canIUse: wx.canIUse('button.open-type.getUserInfo'),    
            orderItems: [
          {        
            typeId: 0,        
            name: '待付款',        
            url: 'bill',        
            imageurl: '../../images/person/personal_pay.png',
          },
          {        
            typeId: 1,        
            name: '待收货',        
            url: 'bill',        
            imageurl: '../../images/person/personal_receipt.png',
          },
          {        
            typeId: 2,        
            name: '待评价',        
            url: 'bill',        
            imageurl: '../../images/person/personal_comment.png'
          },
          {        
            typeId: 3,        
            name: '退换/售后',        
            url: 'bill',        
            imageurl: '../../images/person/personal_service.png'
          }
        ],
      },  
        //事件处理函数
      toOrder: function () {
        wx.navigateTo({      url: '../order/order'
        })
      }
    }

    mine.json

    {  "navigationBarTitleText": "个人中心"}

    备注

    微信小程序微商城系列 都是通过https 动态获取数据并展示的,建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去,谢谢各位!大家在使用过程中有哪些建议可以提出来,我们一起学习哈~~~

    微信小程序微商城系列

    微信小程序微商城:开发者key获取
    微信小程序微商城(一):https框架搭建并实现导航功能
    微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现
    微信小程序微商城(三):电商首页福利专场无限下拉刷新动态API数据实现
    微信小程序微商城(四):动态API实现商品详情页(上)
    微信小程序微商城(五):动态API实现商品详情页(下)
    微信小程序微商城(六):动态API实现新品特卖商品流式布局
    微信小程序微商城(七):动态API实现商品分类
    微信小程序微商城(八):缓存实现商品购物车功能

    关注我们

    如果需要源码和素材可以关注“IT实战联盟”公*众*号并留言(微商城源码,5个字会收到源码下载地址,一定要看源码里面的操作手册会少走很多弯路),也可以加入交流群和作者互撩哦~~~

    IT实战联盟博客:http://blog.100boot.cn 

    展开全文
  • 小程序个人中心(我的页面

    千次阅读 2020-07-27 22:00:07
    1.点击我的,跳转到我的页面,有组件获取头像和名字,开放能力里的open-type标签,设置类名,直接调用头像或者地址和个人信息。 2.点击联系客服,触发绑定事件调用api: uni.makePhoneCall({ phoneNumber: “10086”...

    1.点击我的,跳转到我的页面,有组件获取头像和名字,开放能力里的open-type标签,设置类名,直接调用头像或者地址和个人信息。
    2.点击联系客服,触发绑定事件调用api: uni.makePhoneCall({ phoneNumber: “10086”, });
    3.点击反馈,调用api,open-type=“feedback”
    4.监听分享转发: onShareAppMessage()
    页面:
    在这里插入图片描述

      vue代码:
    
          <template>
      <view class="wrapper">
        <!-- 个人资料 -->
        <view class="profile">
          <view class="meta">
            <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
            <open-data class="avatar" type="userAvatarUrl"></open-data>
            <!-- <text class="nickname">孙悟空</text> -->
            <open-data class="nickname" type="userNickName"></open-data>
          </view>
        </view>
        <!-- 统计 -->
        <view class="count">
          <view class="cell"> 8 <text>收藏的店铺</text> </view>
          <view class="cell"> 14 <text>收藏的商品</text> </view>
          <view class="cell"> 18 <text>关注的商品</text> </view>
          <view class="cell"> 84 <text>我的足迹</text> </view>
        </view>
        <!-- 我的订单 -->
        <view class="orders">
          <view class="title">我的订单</view>
          <view class="sorts">
            <text class="icon-bill">待付款</text>
            <text class="icon-car">待收货</text>
            <text class="icon-money">退款/退货</text>
            <text class="icon-list">全部订单</text>
          </view>
        </view>
        <!-- 地址管理 -->
        <view class="address icon-arrow">
          收货地址
        </view>
        <!-- 其它 -->
        <view class="extra">
          <view @click="makePhone" class="item icon-arrow">联系客服</view>
          <button open-type="feedback" class="item icon-arrow">意见反馈</button>
        </view>
      </view>
    </template>
    
    <script>
    export default {
      methods: {
        makePhone() {
          // 调用 API 拨打电话
          uni.makePhoneCall({
            phoneNumber: "10086",
          });
        },
      },
    };
    </script>
    
    <style scoped lang="less">
    .wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
    
      width: 100%;
      background-color: #f4f4f4;
    }
    
    .profile {
      height: 375rpx;
      background-color: #ea4451;
      display: flex;
      justify-content: center;
      align-items: center;
    
      .meta {
        .avatar {
          display: block;
          width: 140rpx;
          height: 140rpx;
          border-radius: 50%;
          border: 2rpx solid #fff;
          overflow: hidden;
        }
    
        .nickname {
          display: block;
          text-align: center;
          margin-top: 20rpx;
          font-size: 30rpx;
          color: #fff;
        }
      }
    }
    
    .count {
      display: flex;
      margin: 0 20rpx;
      height: 100rpx;
      text-align: center;
      border-radius: 4rpx;
      background-color: #fff;
    
      position: relative;
      top: -27rpx;
    
      .cell {
        flex: 1;
        padding-top: 16rpx;
        font-size: 27rpx;
        color: #333;
      }
    
      text {
        display: block;
        font-size: 24rpx;
      }
    }
    
    .orders {
      margin: -17rpx 20rpx 0 20rpx;
      padding: 20rpx 0;
      background-color: #fff;
      border-radius: 4rpx;
    
      .title {
        padding-left: 20rpx;
        font-size: 30rpx;
        color: #333;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
      }
    
      .sorts {
        padding-top: 30rpx;
        text-align: center;
        display: flex;
      }
    
      [class*="icon-"] {
        flex: 1;
        font-size: 24rpx;
    
        &::before {
          display: block;
          font-size: 48rpx;
          margin-bottom: 8rpx;
          color: #ea4451;
        }
      }
    }
    
    .address {
      line-height: 1;
      background-color: #fff;
      font-size: 30rpx;
      padding: 25rpx 0 25rpx 20rpx;
      margin: 10rpx 20rpx;
      color: #333;
      border-radius: 4rpx;
    }
    
    .extra {
      margin: 0 20rpx;
      background-color: #fff;
      border-radius: 4rpx;
    
      .item {
        line-height: 1;
        padding: 25rpx 0 25rpx 20rpx;
        border-bottom: 1rpx solid #eee;
        font-size: 30rpx;
        color: #333;
      }
    
      button {
        text-align: left;
        background-color: #fff;
    
        &::after {
          border: none;
          border-radius: 0;
        }
      }
    }
    
    .icon-arrow {
      position: relative;
    
      &::before {
        position: absolute;
        top: 50%;
        right: 20rpx;
        transform: translateY(-50%);
      }
    }
    </style>
    
    展开全文
  • 微信小程序个人信息页面

    万次阅读 2018-05-11 08:02:28
    在微信小程序中我们要显示个人信息的页面,在个人信息页面中我们还需要修改一系列的信息,那么就来看看个人信息的页面该怎么搭建吧,以及获取信息内容。前台页面wxml的搭建&lt;!--pages/personal/personal.wxml-...

    在微信小程序中我们要显示个人信息的页面,在个人信息页面中我们还需要修改一系列的信息,那么就来看看个人信息的页面该怎么搭建吧,以及获取信息内容。

    前台页面wxml的搭建

    <!--pages/personal/personal.wxml-->
    <view class="container">
       <view class='logo'>
          <view class='return'>返回</view>
          <view class='per'>个人信息</view>
       </view>
    
       <view class='percontent'>
          <view class='photo'>
             <view class='tphoto'>头像</view>
             <view class="image">
               <image class="tupian" style="width: 150rpx; height: 150rpx;" mode="{{item.mode}}" src="{{src}}"></image>
             </view>
          </view>
          
          <view class='name'>
              <view class='name2'>班级</view>
              <view class='huoqu1'>{{student.classname}}</view>
          </view>
    
          <view class='sex'>
            <view class='sex2'>姓名</view>
            <view class='huoqu1'>{{student.name}}</view>
          </view>
    
          <view class='tel'>
            <view class='tel2'>学号</view>
            <view class='huoqu1'>{{student.no}}</view>
          </view>
    
          <view  class='area'>
            <view class='area2'>系别</view>
            <view class='huoqu1'>{{student.departmentname}}</view>
          </view>
    
       </view>
    </view>
    

    js获取信息内容

     data: {
        src: '../../images/01.jpg',
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var student = wx.getStorageSync('student');
        console.log(student);
        this.setData({student: student});
      
      },
    在这里还有wcss样式的搭建,wcss样式的搭建是很简单的在这里就不展示代码了!
    展开全文
  • 小程序----个人中心页面

    千次阅读 2019-10-05 07:01:28
    页面效果 代码实现: center.wxml页面 <view class="header-container" bindtap="bindcenter"> <image class='header-bg' src = '../../images/image/background@2x.png'></image> <.....
  • 这一章节主要的是实现个人页面的内的功能和内容。 个人页面里面所需要实现的大概有:查看别人与我的评论、点赞,查看我自己的帖子(普通和出售),还有一个伪聊天。 页面布局的话是使用的ColorUi的一个页面布局,...
  • 微信小程序个人中心-我的界面

    万次阅读 多人点赞 2020-04-24 17:14:51
    我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图: ...
  • 微信小程序 - 实现简单登录和个人信息页面

    万次阅读 多人点赞 2020-06-20 20:14:19
    接上节简单介绍完wxml,这节实际运用小程序的wxml来实现一套简单登录和个人信息展示。 登录页面 创建好项目后,在pages下新建一个login目录,右键login文件夹,选择新建page,创建login的page,如下图: 创建后...
  • 在讲解app.json文件时,提到过在pages数组中第一个页面路径是进入小程序的默认显示页面 这一章我们编辑个人中心页面,将个人中心页面路径放在pages数组中的第一个 编辑src/app.json文件,将个人中心页面路径放在第一...
  • 开发微信小程序必不可少的就是用户授权,获取授权之后我们总要给人家把信息显示出来吧,这样更符合...1、首先,你要对你的小程序有的功能模块非常了解,下面是我的小程序个人信息页面以及tabar设置 这个页面的所有
  • 微信小程序个人中心的列表控件

    千次阅读 2020-04-24 11:30:45
    个人中心的列表控件 首先来看效果图 wxml <view class="list-item"> <image class="item-image" src="../images/fuwu.png"></image> <text class="item-text">我的收藏</text> &...
  • 小程序实现漂亮的个人中心版面

    万次阅读 多人点赞 2019-03-15 13:41:03
    常见的个人中心内容包括了: 头像,用户昵称,会员信息,充值信息,还有个人设置,收货地址,订单历史,收藏记录,浏览历史等等。 这些板块都可以用组件来实现。 页面逻辑中: 将头像和昵称还有会员信息放在顶部在一...
  • 上一篇文章:微信小程序开发一个小型商城(七、支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录。往下分别是...
  • 小程序跳H5页面

    万次阅读 热门讨论 2018-07-13 14:21:16
    注意:个人类型与海外类型的小程序暂不支持使用。 好的,我们直接上代码,然后再进行讲解。 wxml1: &amp;amp;amp;lt;view class=&amp;amp;quot;tiaoH51&amp;amp;quot;&amp;amp;amp;gt; &amp...
  • 微信小程序实战篇-个人中心

    万次阅读 多人点赞 2017-08-04 14:57:16
    哈喽,大家好,又到周五啦,有木有期待今天的更新呀~今天要教大家的是制作个人中心界面,先上效果图 个人中心制作 1. mine.js // pages/mine/mine.js var app = getApp() Page({ data: { userInfo: {},...
  • 小程序点餐系统——个人中心

    千次阅读 2021-04-08 17:04:33
    文章目录个人中心页面展示代码页面设计页面样式页面逻辑 个人中心 页面展示 代码 页面设计 <view class="avatar"> <image src="{{listData.avatar}}" mode="aspectFill"></image> </view>...
  • 仿微信个人主页——微信小程序页面设计 微信小程序页面设计:在这里仿微信个人主页做一个初步的还原,非高保真!! 上图: (这里设计的是未更新微信最新版8.0.0的页面,图片放的8.0.0的) 先上代码吧! wxml 等等 ...
  • 微信小程序好看的个人中心界面之水波纹

    千次阅读 热门讨论 2019-08-13 22:20:26
    正如下面所示,在基本信息卡片下方会一直有水波纹在流动,很适合放在个人中心界面,效果很好 实现的基本原理:用一张水波纹的gif图片,设置为和背景图同样的色调,将水波纹设置为绝对定位,固定在下方,并且显示的...
  • 会自动铺满整个小程序页面个人类型的小程序暂不支持使用。 会自动铺满屏幕,意思就是说你的页面只要有了web-view组件,其他内容就显示不出来啦 需要注意的是 src如果有中文会显示白屏 最好使用...
  • 微信小程序简单个人信息表单页面

    千次阅读 2019-10-03 00:29:41
    wxml部分:这里引用的icon图标可以自主更换 <view> <view class="titleCss"> <text class="titleTextCss">{{titleInfo}}</text> </view> <view class="weui-cells ...
  • 公司要用小程序,今天试了试微信的web-view组件,感觉还是不错的,有点像写app的感觉,微信的的确...1.首先要提的是个人类型与海外类型的小程序暂不支持使用,好桑心 2.页面中一但有&lt;web-view&gt;&l...
  • 微信小程序页面跳转、传参

    万次阅读 2017-01-24 14:12:08
    年前最后一天上班了,公司几个人在上班,没事做,还是来学习一下小程序吧。 本博客说一下页面跳转,页面跳转又分为三种:跳转新页面,当前页面跳转及tab跳转。 先来看看navigator相关属性: 直接代码说话: 主...
  • 微信小程序个人心得

    万次阅读 多人点赞 2016-10-12 22:04:13
    昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得.首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起.app.js 这个文件是整个小程序的入口文件,开发者...
  • 微信小程序个人小笔记

    万次阅读 2019-06-10 22:21:02
    首先教大家如何翻微信小程序的官方文档 微信小程序的官方文档中框架是js的交互,组件就是标签,API就是小程序里的方法。 小程序的概念性内容整理: 除了微信小程序还有很多别的小程序: 支付宝小程序,百度小程序,...
  • 微信小程序怎么跳转H5页面

    千次阅读 2020-11-27 16:07:01
    微信小程序怎么跳转H5页面 在微信小程序内要跳转至外部的H5页面,做法比较简单。可以看到微信官方文档中,微信小程序提供了承载网页的容器: web-view,通过这个容器,其实可以实现在小程序内打开一个H5页面。也...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序账户充值页面

    千次阅读 2019-06-30 14:13:18
    框框的 css 设计我就不再多说,挺容易的,下面给出代码: <view class='pay'> <view class='money_charge'> <button class='{{un_click1}}' bindtap='lv1'>10元</button> <button...
  • 微信小程序列表开发-个人中心界面(一)

    万次阅读 多人点赞 2019-04-21 00:30:34
    .js: 逻辑交互,在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。例如在wxml里面wx:for就是调用js里的数据。 后续会更新细讲wxss里面的内容和js文件里的内容,如果以上对你有帮助可以看完我写的有关...
  • 支付宝小程序跳转到h5页面web-view

    万次阅读 2018-12-25 15:10:03
    支付宝小程序跳转到h5页面web-view 基础库 1.6.0 开始支持,低版本需做兼容 组件是一个可以用来承载H5网页的组件,会自动铺满整个小程序页面。 web-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-...
  • 小程序 动态设置 页面标题

    千次阅读 2018-04-14 21:34:18
    为提高微信小程序的用户体验,原则上设计页面时,页面顶部标题应随内容不同进行修改。微信小程序固定架构pages example example.jsexample.jsonexample.wxmlexample.wxssutilsapp.jsapp.jsonapp.wxss微信小程序默认...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 189,057
精华内容 75,622
关键字:

小程序个人中心页面