小程序笔记二：部署

Posted 2020-10-23 狂奔的蜗牛

需要部署的内容

需要部署的东西有阿里图标、public(共享的js、wxss、wxml)、app.js、app.json、wxParse(html代码转view)、js插件(md5.js、base64.js)、static

 

阿里图标部署

详细操作参考：http://www.cnblogs.com/wesky/p/7593115.html

 

public部署

目录结构

area.js  存放的是网站上的省市区数组数据。为什么会放到本地呢？原因一：小程序的ajax有时候很坑爹。原因二，省市区数据使会很频繁，放本地比放服务器更好。原因三：小程序本身自带的也有省市区数据，但是与商城的不符合

inc.js  存放的大部分都是跳转，比如：跳转首页、分页、会员中心、商品详情、搜索 等js事件

menu.wxml 存放的是悬浮的通用底部菜单、商品列表盒子。只要是通用的模板盒子，都可以放着一个文件。

style.wxss 存放的是通用样式，比如菜单样式、商品盒子样式、page样式

 

 inc.js代码如下

/* 全局共享 js*/
var app = getApp();
module.exports = {



  //  时间戳转时间
  formatTime: function (t) {
    //var t = 1402233166999;
    var time = new Date(t);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    return [y, m, d].join(\'-\')
  },

  // 跳转首页
  urlHome: function () {
    wx.redirectTo({
      url: \'../index/index\'
    })
  },
  // 跳转分类
  urlCategory:function(){
    wx.redirectTo({
      url: \'../category/index\',
    })
  },
  // 跳转购物车 
  urlCart: function () {
    wx.redirectTo({
      url: \'../cart/index\',
    })
  },
  // 跳转用户
  urlUser: function () {
    wx.redirectTo({
      url: \'../user/user\',
    })
  },
  
  //跳转商品详情
  urlGoodsInfo:function(gid){
    wx.redirectTo({
      url: \'../goods/index?gid=\'+gid,
    })
  },

  // 进入结算页面
  urlSet:function(){
    wx.redirectTo({
      url: \'../set/index\',
    })
  },
}

另一种命名方式：

goodsList:function(){
    
    return result
}
module.exports = {
    goodsList:goodsList
}    

　　

调用：

// 引入共享inc.js
var inc = require(\'../public/js/inc.js\');
Page({
    // 跳转首页
  hrefHome: function () {
    inc.urlHome();
  },
  // 跳转购物车
  hrefCart:function(){
    inc.urlCart();
  },
  // 跳转会员中心
  hrefUser: function () {
    inc.urlUser();
  },
  // 跳转分类
  hrefCategory: function () {
    inc.urlCategory();
  },
  clickTest:function(){
    wx.navigateTo({
      url: \'../test/index\',
    })
  },  
    
})

　　

　　

 

扩展：menu.wxml 的代码和调用

<!-- 通用底部浮窗 -->
<template name="menu-footer">
  <view class="fix-footer float-wrap">
    <view class="float-li {{nav[0].menu}}">
        <view class=\'li-text\'  catchtap="hrefHome">
            <text class="iconfont icon-home{{nav[0].ico}} li-ico"></text>
            <text class="li-h6">首页</text>
        </view>   
    </view>
    <view class="float-li {{nav[3].menu}}">
        <view class=\'li-text\'  catchtap="hrefCategory">
            <text class="iconfont icon-fenlei{{nav[3].ico}} li-ico"></text>
            <text class="li-h6">分类</text>
        </view>   
    </view>
    <view class="float-li">
        <view class=\'li-text {{nav[1].menu}}\'  catchtap="hrefCart">
            <text class="iconfont icon-gouwuche{{nav[1].ico}} li-ico"></text>
            <text class="li-h6">购物车</text>
        </view>   
    </view>
    <view class="float-li">
        <view class=\'li-text {{nav[2].menu}}\' catchtap="hrefUser">
            <text class="iconfont icon-huiyuan{{nav[2].ico}} li-ico"></text>
            <text class="li-h6">我的</text>
        </view>   
    </view>
  </view>
 
</template>

<!-- 商品详情 底部浮窗-->
<template name="menu-goods">
    <view style="height: 100rpx"></view>
    <view class="fix-goods-footer">
        <view class="float-li s1 home" catchtap="hrefHome">
            <text class="iconfont icon-home1 li-ico"></text>
            <text class="li-h6">首页</text>
        </view>
        <view class="float-li s1 kefu" style=\'position:relative\'>
            <text class="iconfont icon-huiyuan li-ico"></text>
            <text class="li-h6" >客服</text>
            <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:1rpx;left:1rpx;color:#ff0">
        </contact-button> 
        <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:0rpx;left:50rpx;color:#ff0">
        </contact-button> 
        <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:50rpx;left:1rpx;color:#ff0">
        </contact-button> 
        <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:50rpx;left:50rpx;color:#ff0">
        </contact-button> 

        </view>
        <view class="float-li s1" catchtap="hrefCart" style=\'position:relative\'>
            <text class="iconfont icon-gouwuche1 li-ico"></text>
            <text class="li-h6">购物车</text>
            <view class="cart-number">{{carNum}}</view>
        </view>
        <view class="float-li s2 add-cart" catchtap="attrShow" data-isbuy="0">加入购物车</view>
        <view class="float-li s2 buy" catchtap="attrShow" data-isbuy="1">立即购买</view>
    </view>
</template>

其它页面调用，import导入，data是传参：

<import src="../public/wxml/menu.wxml"/>
<template is="menu-footer" data="{{nav: footNav}}"/>

 

app.js部署

1.所有请求的api链接

App({
   api:[
        goods:\'https://xxx.com/goods\',    // 商品数据
        category:\'https://xxx.com/category\',   // 分类数据
        search:\'https://xxx.com/search\'    // 搜索数据
    ] 
})

推荐api地址部署再app.js里面（部署再其它地方问题也不大，比如public/xxx）　　

2.登录

登录小程序功能是部署再app.js里面的

 

app.json部署

主要是部署pages下的参数，这个关系到你小程序新建的文件夹及文件

{
  "pages":[
    "pages/index/index",
    
    "pages/logs/logs",

    "pages/cart/index",
    
    "pages/goods/index",

    "pages/user/user",
    "pages/address/index",
    "pages/address/edit",
    
    "pages/set/index",
    "pages/pay/index",
    "pages/order/index",
    "pages/order/info",
    "pages/test/index",

    "pages/coupon/index",
    "pages/coupon/user",
    "pages/category/index",
    "pages/category/goods",
    "pages/search/index",
    "pages/activity/hot" 
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

　

在这里建立好名称，它会自动帮你生成文件夹及文件（wxml、js、json、wxss）。

window是控制小程序的窗口参数，比如窗口颜色、导航字体颜色

 

wxParse部署

应用场景：小程序调用商城商品详情。小程序本身是不支持html代码的，有了这个插件，就可以做到兼容。

教程：http://www.cnblogs.com/wesky/p/8066233.html

 

js插件

md5、base64 这js插件看情况使用

 

重点：图片内容不要部署本地，最好放到服务器上。小程序大小只有2M