微信小程序商城类开发步骤问题及解决办法（一）

微信的发展影响着我们生活的方方面面，从一开始的社交聊天到现如今的各种各样的便民服务。例如：微信扫一扫（它不仅仅局限于二维码，还能扫描条形码进行商品识别、查看网上价格与快速网购）、微信搜索、微信公众号、微信小程序等等。

这段时间，接触到微信小程序，并尝试着做了一个商城类的小程序。以下是项目开发的步骤，这次主要从项目结构目录、全局配置和商城引导页来分享。

新建一个小程序，生成目录如图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标签。

以上是商城小程序开发全局配置及引导页制作的全部内容，未完待续。

前端渡劫

发布了18 篇原创文章 · 获赞 5 · 访问量 1万+

私信关注

微信小程序商城类开发步骤问题及解决办法（一）

猜你喜欢