E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

本文档是基于本人第一次接触小程序的全过程学习步骤步骤1:可参见小程序官方简易教程:https://developers.weixin.qq.com/miniprogram/dev/以下描述是基于上述教程的基础上实际上手内容步骤2:1、申请账号,根据指引申请账号之后获得开发者id2、安装开发工具,根据教程指引下载安装步骤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.jsApp({  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:页面初始化:data是页面初始数据,onLoad生命周期回调—监听页面加载,类似还有onShow,onReady,onHide等一个服务除界面展示,还需要和用户做交互:响应用户的点击、获取用户的位置等等。通过编写 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> 如需完整项目源码请联系我,后续会更后端篇。。。>_<

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序商城(前端篇)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏