微信小程序商城(前端篇)

本文档是基于本人第一次接触小程序的全过程学习步骤

步骤1:

可参见小程序官方简易教程:https://developers.weixin.qq.com/miniprogram/dev/

以下描述是基于上述教程的基础上实际上手内容

步骤2:

1、申请账号,根据指引申请账号之后获得开发者id

2、安装开发工具,根据教程指引下载安装

步骤3:新建项目:打开微信web开发者工具——选择小程序项目——选择一个空目录(也可直接选择一个项目打开,此处基于第一次新建项目)——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹,则会显示下图第四点,一般选择普通快速启动模板



步骤4:代码构成,新建完一个快速模板之后,会生成如下文件:

1、app.json :

微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地,app.json 的 pages 字段可以知道所有页面路径,于是微信客户端就把页面的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个页面。

关于app.json描述:

//当前小程序的全局配置,包含所有页面路径、界面表现、网络超时时间、底部tab等
{
  //pages :用于描述当前小程序所有页面路径,用于指定小程序有哪些页面组成,每一项都对应一个页面的 路径+文件名 文件名不需要写后缀  框架会自动去寻找 对应位置的 4个文件 .json .js  .wxml  .wxss 进行处理
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // window:全局默认窗口的表现,定义所有页面的顶部背景颜色,文字颜色等 
  "window":{
    //下拉 loading 的样式,仅支持 dark / light
    "backgroundTextStyle":"light",
    //导航栏背景颜色
    "navigationBarBackgroundColor": "#37383c",
    //导航连标题内容
    "navigationBarTitleText": "大喵的小店",
    //导航栏标题颜色
    "navigationBarTextStyle":"ffffff",
    //窗口背景色
    "backgroundColor": "#eeeeee",
    //是否开启当前页面的下拉刷新
    "enablePullDownRefresh": true
  },
  //底部tab栏目的表现
    "tabBar": {
      //tab 上的文字默认颜色,仅支持十六进制颜色
      "color": "#b7b7b7",
      //tab 上的文字选中时的颜色,仅支持十六进制颜色
      "selectedColor": "#AB956D",
      //tabbar上边框的颜色
      "borderStyle": "#f5f5f5",
      //tab 的背景色,仅支持十六进制颜色
      "backgroundColor": "#f5f5f5",
      //tab 的列表,最少2个、最多5个 tab
      "list": [
        {
          //页面路径,必须在 pages 中先定义
          "pagePath": "page/component/index",
          //图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon
          "iconPath": "image/12.png",
          //选中时的图片路径
          "selectedIconPath": "image/11.png",
          //tab 上按钮文字
          "text": "首页"
        },
        {
          "pagePath": "page/component/category/category",
          "iconPath": "image/22.png",
          "selectedIconPath": "image/21.png",
          "text": "分类"
        },
        {
          "pagePath": "page/component/cart/cart",
          "iconPath": "image/32.png",
          "selectedIconPath": "image/31.png",
          "text": "购物车"
        },
        {
          "pagePath": "page/component/user/user",
          "iconPath": "image/42.png",
          "selectedIconPath": "image/41.png",
          "text": "我的"
        }
      ]
    },
    //网络超时时间
      "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
      },
      //是否开启debug模式,默认是关闭的
      "debug": false
}

2、小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

 

3、pages文件夹下面都是一个个的页面,一般新建项目之后pages下会有一个index文件夹里面包含4个文件,分别是:index.js,index.json,index.wxml,index.wss,即,每个页面都是有这四个文件组成的,index是首页,新建页面可以自定义,所有页面都需要在app.json的pages字段中描述,如下图:

步骤5:新建页面,以及页面各个文件描述,以下描述index页面,以及user页面

1、新建页面:

2、index页面详解:index.js,index.json,index.wxml,index.wss

  • 关于首页底部tab栏目的表现、窗口背景色、导航栏的配置请详见步骤4,app.json中的描述
  • 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色,其中 WXML 充当的就是 HTML 的角色,wss充当的就是CSS的角色
  • index.js:
  1. 页面初始化:
    data是页面初始数据,onLoad生命周期回调—监听页面加载,类似还有onShowonReadyonHide
  • 一个服务除界面展示,还需要和用户做交互:响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作例如:

标签切换:
js代码:
 
对应的wxml代码:


跳转至详情页:点击图片或者文字页面跳转
js代码:

对应的wxml代码:

  • index.wxml:描述当前这个页面的结构,采用MVVM 的开发模式,js只需要管理状态
  • index.wss:WXSS 用来决定 WXML 的组件应该怎么显示:


  • user页面:

    js:
    //index.js
    //获取应用实例
    var app = getApp()
    var myData = require('../../utils/data')
    var util = require('../../utils/util')
    
    Page({
      // 页面初始数据
      data: {
    
      },
      // 地址编辑
      editAddr : function(e){
        console.log(e)
        wx.navigateTo({
          url:'../edit_addr/edit_addr?addrid='+e.currentTarget.dataset.addrid
        })
      },
      onLoad() {
        var self = this;
        /**
         * 获取用户信息
         */
        // wx.getUserInfo({
        //   success: function (res) {
        //     self.setData({
        //       thumb: res.userInfo.avatarUrl,
        //       nickname: res.userInfo.nickName
        //     })
        //   }
        // })
      }
    })
    

    wxml:
     

    <!--user.wxml-->
    
    <view class="container">
      <view class="user_base_info">
        <view class="user_avatar">
            <!-- <image src="{{thumb}}" class="thumb"></image>   -->
            <open-data type="userAvatarUrl"></open-data>     
        </view>
        <view class="user_info">
          <text>
            昵称:
          </text>
          <open-data type="userNickName" lang="zh_CN"></open-data> 
        </view>
      </view>
    
     <view class="user_addr_manage">
        <view class="user_addr_title">【地址管理】</view>
        <block wx:for="{{addrDate}}" wx:key="item.id">
          <view class="user_addr_item">
              <text class="addr_sub">{{item}}</text>
              <view class="addr_edit" bindtap="editAddr" data-addrid="{{index+1}}"></view>
          </view> 
        </block>
        <navigator url="../edit_addr/edit_addr" >新增地址 +</navigator>
     </view>
      
    </view>

    获取用户信息:最开始我用的wx.getUserInfo,但是小程序目前在测试版和体验版限制通过wx.getUserInfo({})获取弹出授权框。


     

    <open-data type="groupName" open-gid="xxxxxx"></open-data>
    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender" lang="zh_CN"></open-data>

     

如需完整项目源码请联系我,后续会更后端篇。。。>_<

 

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值