首页 / 更多教程 / 微信小程序商城（前端篇）
微信小程序商城（前端篇）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序商城（前端篇），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5964字，纯文字阅读大概需要9分钟。
内容图文
本文档是基于本人第一次接触小程序的全过程学习步骤
步骤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：
- 一个服务除界面展示，还需要和用户做交互：响应用户的点击、获取用户的位置等等。通过编写
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 }) }, onl oad() { 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>
如需完整项目源码请联系我，后续会更后端篇。。。>_<
内容总结
以上是互联网集市为您收集整理的微信小程序商城（前端篇）全部内容，希望文章能够帮你解决微信小程序商城（前端篇）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。