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

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

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

微信的发展影响着我们生活的方方面面,从一开始的社交聊天到现如今的各种各样的便民服务。例如:微信扫一扫(它不仅仅局限于二维码,还能扫描条形码进行商品识别、查看网上价格与快速网购)、微信搜索、微信公众号、微信小程序等等。       这段时间,接触到微信小程序,并尝试着做了一个商城类的小程序。以下是项目开发的步骤,这次主要从项目结构目录、全局配置和商城引导页来分享。图一       新建一个小程序,生成目录如图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标签。以上是商城小程序开发全局配置及引导页制作的全部内容,未完待续。微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序商城类开发步骤问题及解决办法
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏