微信的发展影响着我们生活的方方面面,从一开始的社交聊天到现如今的各种各样的便民服务。例如:微信扫一扫(它不仅仅局限于二维码,还能扫描条形码进行商品识别、查看网上价格与快速网购)、微信搜索、微信公众号、微信小程序等等。
这段时间,接触到微信小程序,并尝试着做了一个商城类的小程序。以下是项目开发的步骤,这次主要从项目结构目录、全局配置和商城引导页来分享。
新建一个小程序,生成目录如图1所示,pages文件主要存放小程序的页面文件,其中每个文件夹为一个页面,每个页面下包含四个文件(以单页文件名为index为例,其文件内包含index.js、index.json、index.wxml、index.wxss四个文件)。utils文件用来存放全局js文件,公共用到的事件处理代码可以放置到此文件夹中,方便之后页面调用。app.js 是系统的方法处理全局文件,也就是说文件中规定的函数和数据,在整个小程序中,每一个框架页面和文件都可以使用this获取。App.json是系统全局配置文件,包含设置页面路径,设置底部,网络,调试模式,设置导航头的颜色,字体大小,下面有没有tabbar等功能。App.wxss是全局样式表,类似css文件中常用全局样式reset.css。project.config.json为项目的配置文件。
全局配置,主要体现在app.js和app.json。app.js中主要使用的事件为onlaunch,它用于监听小程序初始化后触发。当打开小程序,会进行获取商城的名称,获取用户信息,用户登录,本地存储的过程。微信提供了丰富的API,简化开发步骤,其中用的最多的是wx.request(),它类似于ajax,用于前后台的数据交互。通过调用接口wx.login() 获取临时登录凭证(code);简化步骤如下:
onLaunch: function() {
wx.login({
success: function(res) {
if (res.code) {
//发起网络请求
wx.request({
url: '微信登录的接口',
data: {
code: res.code
}
})
success: function (res) {
if (res.data.code == 10000) {
// 调用注册方法
that.registerUser();
return;
}
if (res.data.code != 0) {
// 登录错误
wx.hideLoading();
wx.showModal({
title: '提示',
content: '无法登录,请重试',
showCancel: false
})
return;
}
//console.log(res.data.data)
that.globalData.token = res.data.data.token;
that.globalData.uid = res.data.data.uid;
}
} else {
console.log('登录失败!' + res.errMsg)
}
}
});
}
其中,标红的globalDat是一个全局变量,它可以在在pages文件夹下任何一个页面中调用,
储存方法:
globalData: {
userInfo: null,
subDomain: "b16a7808b6a4205a089400a9d778d4f6",
version: "2.0"
}
调用方法如下:
//获取应用实例
const app = getApp()
var info = app.globalData.userInfo
引导页的页面截图如图2 ,页面上从后台获取的信息为商品名称和用户头像。首页,定义文件夹名称为index,放置在pages文件夹中,为了方便配置,其子目录统一命名为index.wxml、index.wxss、index.js、index.json。增加一个页面,则需要在app.json中添加,例如:
"pages":[
"pages/index/index", //引导页
.
.
.
],
以下是index.wxml页面框架代码:
<view class="container" >
<view class='loading-box' wx-if="{{show}}">
<image src='../../images/loading.gif'></image>
</view>
<view class='title'>
<image src='../../images/title.png'></image>
</view>
<view class='main'>
<image class='headPhoto' src='{{userInfo.avatarUrl}}'></image>
<view class='btn' bindtap='toStore'>进入店铺</view>
</view>
</view>
代码中使用{{}}来完成数据绑定,数据来源于index.js,还使用了条件渲染和点击事件。使用 wx:if="{{ show }}" 来判断是否需要渲染该代码块,如果show为真,则显示,否则隐藏。与它有相同功能的是hidden,但是之间有所区别,wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。所以当频繁切换的时候用hidden,偶尔切换时用 wx:if。Bindtab为点击事件,当点击此元素,触发toStore方法。
在开发过程中,难免会遇到一些问题,此过程中发现在样式文件中使用background-images:url(本地图片路径地址);在视图层不显示。解决办法:改用网络url或者base64,或者不采用背景图添加图片,采用image标签。
以上是商城小程序开发全局配置及引导页制作的全部内容,未完待续。