精华内容
下载资源
问答
  • 主要介绍了微信小程序个人中心的列表控件实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 看效果 开发计划 1、实现微信授权并获取用户信息 2、个人中心页面布局 一、实现微信授权并获取用户信息 mine.js onLoad: function () { if...

    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 

    展开全文
  • 微信小程序个人信息页面

    万次阅读 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样式的搭建是很简单的在这里就不展示代码了!
    展开全文
  • 微信小程序个人中心-我的界面

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

    个人中心-我的界面

    简介

    我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图:
    效果图
    在这里插入图片描述

    .
    .
    .
    这种效果的整体布局固定不变,如果想要更好看的效果,可以修改里面的图片小图标,还有背景颜色,又或者加上动图都是可以的,但是整体的框架基本就是这样,所以下面来看看代码是怎么实现的

    代码

    .
    wxml

    <view class="view_contain">
      <!-- 第一部分 -->
      <view class="view_1">
        <view class="view_image_text">
          <image class="image_radius" src="../images/timg.png" />
          <text>张三</text>
        </view>
      </view>
      <!-- 第二部分 -->
      <view class="view_2">
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test1.png"></image>
          <text class="text_saoyisao">待付款</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test2.png"></image>
          <text class="text_saoyisao">待发货</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test3.png"></image>
          <text class="text_saoyisao">待收货</text>
        </view>
        <view class="view_tupianwenzi">
          <image class="image_tupian" src="../images/test4.png"></image>
          <text class="text_saoyisao">待评价</text>
        </view>
    
      </view>
      <!-- 第三部分 -->
      <view class="view_3">
        <view class="list-item">
          <image class="item-image" src="../images/test5.png"></image>
          <text class="item-text">我的收藏</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test6.png"></image>
          <text class="item-text">我的评价</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test8.png"></image>
          <text class="item-text">版本更新</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test9.png"></image>
          <text class="item-text">售后记录</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
        <view class="list-item">
          <image class="item-image" src="../images/test12.png"></image>
          <text class="item-text">分享邀请</text>
          <image class="image-jiantou" src="../images/jiantou.png"></image>
        </view>
        <view class="line"></view>
      </view>
    </view>
    

    .
    .
    wxss

    /* 使用page就是为了保证  满屏 */
    
    page {
      width: 100%;
      height: 100%;
    }
    
    .view_contain {
      width: 100%;
      height: 100%;
      background: #f0eeed
    }
    
    /* 第一部分 */
    
    .view_1 {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 25%;
      background: #a0deee;
    }
    
    .view_image_text {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    .image_radius {
      height: 50px;
      width: 50px;
      border-radius: 30px;
    }
    
    /* 第二部分 */
    
    .view_2 {
      width: 100%;
      height: 15%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: white;
    }
    
    .view_tupianwenzi {
      display: flex;
      flex-direction: column;
      width: 120rpx;
      align-items: center;
      margin-left: 25rpx;
      margin-right: 25rpx;
    }
    
    .image_tupian {
      display: flex;
      width: 100rpx;
      height: 100rpx;
    }
    
    /* 第三部分 */
    
    .view_3 {
      width: 100%;
      height: 50%;
      /* background: #f0eeed; */
    }
    
    .list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 80rpx;
      margin-top: 20rpx;
      position: relative; /*父元素位置要设置为相对*/
      background: white;
    }
    
    .item-image {
      width: 50rpx;
      height: 50rpx;
      margin: 20rpx;
    }
    
    .item-text {
      color: gray;
      font-size: 35rpx;
      margin-left: 20rpx;
    }
    
    .image-jiantou {
      width: 20rpx;
      height: 35rpx;
      position: absolute; /* 要约束所在位置的子元素的位置要设置成绝对 */
      right: 0; /* 靠右调节 */
      margin-right: 35rpx;
    }
    
    /* 黑线 使得产生阴影效果 */
    
    .line {
      width: 100%;
      height: 3rpx;
      background: lightgray;
      margin-left: 90rpx;
    }
    
    
    

    最后附上下载地址:
    https://download.csdn.net/download/wy313622821/12366619

    展开全文
  • 零基础入门微信小程序开发

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

    课程介绍

    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装、小程序发布等内容,共 9 篇文章。

    本课程共包含四个部分。

    第一部分(第1-3篇)带你初步了解小程序是什么,然后进行小程序开发的准备工作,从注册账号到安装开发工具一应俱全。工欲善其事,必先利其器。

    第二部分(第4-6篇)。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识,需要掌握的会进行说明,需要扩展的会提供信息的出处。千里之行始于足下。

    第三部分(第7-8篇)通过指南针的例子,介绍一个小程序的实现过程。通过这个实例,综合运用所学知识,使小程序开发能力进一步提高。麻雀虽小,五脏俱全。

    第四部分(第9篇)只包含一篇文章,具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓,全在收口。

    哪怕您事先没有任何微信小程序相关技术的经验,认真学完该达人课之后,您会掌握基本的小程序开发方法,并具备自主扩展知识面,以及进行更高层次开发的能力。

    点击查看课程全部内容

    作者介绍

    薛卫国,现就职于某外企担任架构小组责任人,CSDN 博客专家,长期从事 C++ 开发,精通 UML、设计模式,创办有公众号《面向对象思考》。毕业于东北大学,曾留校在国家重点实验室工作。

    课程内容

    第01课:初识微信小程序

    要火的节奏

    最近有一则来自北京商报的新闻引起了不少人的注意,我们这里选取一部分:

    争夺流量 手机厂商“抱团”对抗微信小程序

    3月20日,小米、中兴、华为等10家手机厂商联合对外宣布,推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下,本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为,对于整个市场来说,流量竞争有促进作用,但微信已经具有较强的用户黏性,十大手机厂商要想争夺用户流量并非易事。

    估计这些厂家的标准出台还需要一段时间,但是有一点可以确定的是:小程序类的开发要火。

    但如果你打开轻应用的文档可以发现两点:

    1.应用文档的信息量还很有限。2.轻应用的架构,采用的技术和微信小程序很相似。

    处于这个目的,作者赶在这个时机制作了本课程,希望可以为潮流加一份力;作为程序员,希望各位可以通过本课程的学习,在有限的时间内为自己添一份技能!

    参考资料:轻应用开发文档

    什么是小程序?

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    当然了,关于玩法等等不是本文的内容,可以参照百度百科

    这就是微信小程序的成功案例了。

    微信小程序简介

    微信小程序简称小程序,张小龙在微信公开课 Pro 上发布的小程序正式上线,时间是2017年1月9日。关于小程序,张小龙在他的公开课中有过很详细的说明,大家尽可以到网上去搜,这里不再赘述,只说作者自己的理解。

    微信小程序这个词可以分解为“微信”和“小程序”两部分。

    其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。

    “小程序”是说它首先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。

    另外,微信不会提供类似于小程序商店的地方,需要小程序提供者自己通过二维码,群分享的手段来传播,这就是所谓去中心化的形态。

    微信朋友圈提供了好友之间沟通信息的手段,订阅号提供了面向粉丝推送信息的手段,而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

    小程序相关技术介绍

    本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员,因此在说明微信小程序的同时,对相关技术也将进行相应的介绍。通过这种方式,可使读者能够非常顺利地学习,而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

    微信小程序推出一年多一点的时间,算是一个新事物,但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现,不光是微信小程序,很多类似形态的应用都采用类似的架构:

    1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
    2. 使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 XML 语言来描述,遵从 XML 语法,对于页面的共同风格,使用 CSS 进行定义。
    3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
    4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。

    具体的语法,用途等将会在使用的时候详细介绍,这里只提一下相关技术的基本情况,了解即可。

    换一种说法就是:并不需要另外自己调查,跟着本课程走下去就好。

    JSON

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于 ECMAScript(W3C 制定的 JavaScript 规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

    XML

    XML(Extensible Markup Language),中文名为可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。

    在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息,比如文章等。它可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输,提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术,也是当今处理分布式结构信息的有效工具。早在1998年,W3C 就发布了 XML1.0 规范,使用它来简化 Internet 的文档信息传输。

    CSS

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    JavaScript

    JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    在1995年时,由 Netscape 公司的 Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作,Netscape 管理层希望它外观看起来像 Java,因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

    为了取得技术优势,微软推出了 JScript,CEnvi 推出 ScriptEase,与 JavaScript 同样可在浏览器上运行。为了统一规格,再加上 JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

    学习方法

    微信小程序虽然是新事物,但学习方法却不是新方法。

    我们的套路是:首先生产一个最简单的小程序实例,通过这个实例介绍微信小程序的构造和想法,这算是学习这个活动中“学”的部分。然后扩展这些知识点,通过开发一个简单的小程序的过程来运用这些知识点,这算是“习”的过程。

    这是作者这些年来屡试不爽的方法。

    参考资料

    在学习和开发的过程中,我们主要会参考微信的开发文档。其原因是小程序太新了,相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍,但是说实话,内容并不比微信本身的开发文档更详尽。

    第02课:开发环境的准备

    创建自己的小程序账号

    在开发自己的微信小程序之前,首先需要注册小程序账号,接下来我们一步一步做详细说明。

    打开浏览器,输入:mp.weixin.qq.com。

    因为是第一次使用,所以选择画面右上角的“立即注册”。

    选择左下角的“小程序”方框。

    输入邮箱、密码、确认密码、验证码,之后选择同意协议和条款。当然这里的密码不是邮箱的密码,而是正在申请的小程序账号的密码。

    最后按下“注册”按钮。

    点击“登录邮箱”按钮。打开相应的软件后,应该可以收到下面的邮件。如果没收到的话,建议看一下垃圾邮件,没准儿那里有。

    单击下半部一大片绿色的部分,就可以回到注册界面继续剩下的工作。

    选择主题类型为“个人”,然后输入管理员的姓名,身份证号码。

    输入手机号码并单击“获取验证码”,将手机接收到的验证码输入到短信验证码栏中。

    完成上述步骤,画面下部会出现一个二维码,需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

    如果认证成功,画面会变成下面这个样子。

    点击“继续”按钮。

    意思就是现在后悔还来得及,如果不后悔今后就没法后悔了。我们按下“确定”按钮。

    大功告成!

    小程序管理平台

    账号申请成功之后,就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

    首页

    内容比较简单,主要是表示小程序的实时访问次数和系统公告。

    开发管理

    用户在使用小程序的时候,需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

    过程也不复杂,一共分为三步:上传代码,提交审核和发布小程序。

    用户身份

    这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

    数据分析

    这个画面可以统计小程序的访问数量,对用户来源、性别、年龄分布等进行分析。

    模板消息

    这个画面可以定制微信小程序向客户发送的消息。

    客服消息

    通过这个画面可以指定小程序的客服人员,从而实现小程序的在线客服功能。

    附近的小程序

    当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时,小程序指定地点以后,用户可以通过微信的“附近的小程序”界面发现该小程序。

    运维中心

    一共有两个页面,分别用于查询小程序的错误日志和对客户端进行监控。

    推广

    用来自定义小程序推广关键字。

    设置

    设置分类中一共有五个页面,这里只介绍前两个。

    基本设置

    顾名思义,这里主要是用来设置小程序的基本信息。内容包括:

    1. 设定小程序名称,小程序头像;
    2. 取得小程序码;
    3. 取得认证;
    4. 设定主题信息;
    5. 其他省略。

    开发设置

    这个页面主要负责和小程序开发相关的设定信息,内容包括:

    1. 取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
    2. 生成小程序秘钥。
    3. 指定服务器域名。小程序可以访问外部网站,可以上传和下载文件。但是对象服务器不是任意的,需要在这里指定。
    4. 其他省略。

    其他

    在画面的右上角,有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

    安装开发工具

    小程序账号申请成功之后的工作就是准备开发环境。

    早期的版本在首页分类中有开发工具的下载链接,最近不知道为什么变成了访问次数统计画面。但是没有关系,可以直接点击这里,便可打开下面的下载地址页面。

    根据操作系统选择合适的下载链接。

    下载完成后打开安装程序,首先是开始画面。

    按下“下一步”按钮。

    按下“我接受”按钮。

    指定适当的安装目录后按下“安装”按钮。

    安装中……

    完成!

    接下来就可以开始微信小程序的开发之旅啦!

    第03课:微信开发者工具介绍

    第04课:小程序构成介绍——配置文件的形式和内容

    第05课:小程序构成介绍——WXML 和 WXSS

    第06课:小程序构成介绍——事件处理和数据绑定

    第07课:小程序开发实例——指南针(上)

    第08课:小程序开发实例——指南针(下)

    第09课:发布小程序

    点击查看课程全部内容

    展开全文
  • 每个小程序基本上都会使用到,里面可以设置保存每个用户的数据和操作习惯等等,界面也很美观,看起来很舒服,希望大家能够喜欢
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 个人中心的列表控件首先来看效果图wxml我的收藏wxss.list-item {display: flex;flex-direction: row;align-items: center;width: 100%;height: 80rpx;margin-top: 10rpx;position: relative; /*父元素位置要设置为...
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小...
  • 微信小程序个人小笔记

    万次阅读 2019-06-10 22:21:02
    首先教大家如何翻微信小程序的官方文档 微信小程序的官方文档中框架是js的交互,组件就是标签,API就是小程序里的方法。 小程序的概念性内容整理: 除了微信小程序还有很多别的小程序: 支付宝小程序,百度小程序,...
  • 前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序页面开发,第五章:微信小程序...
  • 基于微信小程序的培训机构系统 前言:该系统作为本科毕业设计,可能还有很多的不足。只是当时做这个系统的时候,由于需要使用java语言作为后端实现与微信小程序界面数据交互,看遍网上很多的案例基本后台都是php语言...
  • 微信小程序个人中心的列表控件

    千次阅读 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> &...
  • 最近写了一个微信小程序的前台界面,以下是界面样式 这里是部分页面
  • 微信小程序 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。 全面开放申请后,主体类型为企业、...
  • 微信小程序个人心得

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

    万次阅读 多人点赞 2019-07-04 11:36:36
    微信小程序毕业设计、商城小程序】 该微信小程序商城功能模块包含: 首页、分类、商品详情页面,包含加入购物车、收藏商品、商品评论功能、用户登录、微信登录、订单管理、地址管理;完整的购物流程,商品的加入、...
  • web-view组件简单使用 1. web-wiew官方文档 ...会自动铺满整个小程序页面个人类型的小程序暂不支持使用。 pages/baidu/baidu.wxml <web-view src="https://www.baidu.com/"> </web-view
  • 公司要用小程序,今天试了试微信的web-view组件,感觉还是不错的,有点像写app的感觉,微信的的确确帮前端的兄弟们做了很多良心的事,前端因为微信工作机会大大增加,地位也太高了不少,更加感动主要是工资也能涨,...
  • 个人简历”微信小程序+源码 运行工具:微信web开发者工具 截图链接:https://blog.csdn.net/qq_38275941/article/details/85303724
  • 申请微信小程序并认证的步骤参见三掌柜发布的名为“微信小程序:微信公众号申请微信小程序并认证的步骤”这篇文章,这里只介绍怎么正确登录到微信小程序管理后台界面。  发现一个问题,之所以被误导就是因为没有...
  • 微信小程序个人简历

    2018-12-27 20:17:31
    个人简历”微信小程序+源码 运行工具:微信web开发者工具 截图链接:https://blog.csdn.net/qq_38275941/article/details/85303724
  • 微信小程序跳转到其他网页(外部链接)

    万次阅读 多人点赞 2018-03-08 13:48:50
    个人类型和海外类型的小程序不支持 web-view 标签 也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度...
  • 仿微信个人主页——微信小程序页面设计 微信小程序页面设计:在这里仿微信个人主页做一个初步的还原,非高保真!! 上图: (这里设计的是未更新微信最新版8.0.0的页面,图片放的8.0.0的) 先上代码吧! wxml 等等 ...
  • 因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面。先了解一下 we...
  • 转载地址:(微信小程序微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人GitHub(喜欢的还请点个Star、...
  • 微信小程序页面跳转

    千次阅读 2017-05-14 09:27:07
    微信小程序跳转页面

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,171
精华内容 11,668
关键字:

微信小程序个人中心页面

微信小程序 订阅