• <tfoot id='k4hdr2nc'></tfoot>

  • <small id='dgtv8qt8'></small><noframes id='vdx4uxbe'>

      <tbody id='fu4gzyaf'></tbody>

      <i id='eevh6ptb'><tr id='q015w1qr'><dt id='vjprtzwv'><q id='qgsg2qe7'><span id='bdpp5esm'><b id='zjkep43i'><form id='1zdxryjk'><ins id='q749toq6'></ins><ul id='0j3i4hm0'></ul><sub id='4u4b1hkp'></sub></form><legend id='7c9p4q24'></legend><bdo id='chst43gl'><pre id='kpe3l21s'><center id='62njv2ka'></center></pre></bdo></b><th id='aw0lm1wz'></th></span></q></dt></tr></i><div id='kn4hwbag'><tfoot id='td6avuos'></tfoot><dl id='rlz55rbm'><fieldset id='huacndhm'></fieldset></dl></div>

      <legend id='jepbb97f'><style id='olzvtlgq'><dir id='cl2ygm57'><q id='6dx21twk'></q></dir></style></legend>
        网站建设公司当前位置 : 网站建设公司 > 知识普及

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

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

          <small id='ksv8vxn5'></small><noframes id='m1x43czl'>

            <tbody id='qz4flfs7'></tbody>
          <legend id='j6a3xru8'><style id='h4297fdm'><dir id='gtsmxfo8'><q id='n0k34zn7'></q></dir></style></legend>
          • <i id='qac7eetz'><tr id='786p0pog'><dt id='l2ww9wpy'><q id='9h2zebd0'><span id='jas57cmy'><b id='trqe7wgh'><form id='46byrxzh'><ins id='rv32gx8t'></ins><ul id='47gigkks'></ul><sub id='4j0w9bs5'></sub></form><legend id='v80n0mme'></legend><bdo id='tmfm86lw'><pre id='ormomy8d'><center id='hhpbjmd5'></center></pre></bdo></b><th id='qy2c95ud'></th></span></q></dt></tr></i><div id='4vcqbgbo'><tfoot id='qll950gf'></tfoot><dl id='o8e5hl70'><fieldset id='i28nhx7j'></fieldset></dl></div>
            <tfoot id='rkb4rpk2'></tfoot>
            • 本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

                <tbody id='qlobifmd'></tbody>

                <small id='op6wplqd'></small><noframes id='jm6bdhq6'>

                  <legend id='hsiezp0j'><style id='hb90i4ek'><dir id='5czxr7g7'><q id='6lbe1aev'></q></dir></style></legend>

                  <tfoot id='td8df6wc'></tfoot>
                1. <i id='ew7nnf7t'><tr id='ykncg5vv'><dt id='n09uzl86'><q id='ikynuw2w'><span id='rggl4aek'><b id='d7rn82v4'><form id='jdix4vlo'><ins id='vduqpf2c'></ins><ul id='3bsyt2rn'></ul><sub id='9rzphbl0'></sub></form><legend id='jedi8642'></legend><bdo id='ifovko3y'><pre id='3agc6vt3'><center id='n77927vo'></center></pre></bdo></b><th id='v70ti3yb'></th></span></q></dt></tr></i><div id='3582oekr'><tfoot id='1x91q20n'></tfoot><dl id='n57w4wuk'><fieldset id='kgljr1e1'></fieldset></dl></div>