12-08-微信小程序笔记扩容加强版

最新推荐文章于 2023-02-28 21:53:26 发布
最新推荐文章于 2023-02-28 21:53:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： 12-微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ange997/article/details/109366893
版权

微信小程序账号与工具

在线文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序开发者账号注册

微信公众平台：https://mp.weixin.qq.com/

小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1

微信小程序测试号地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

微信开发者工具

微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

小程序在线Demo

微信小程序文件结构

主体文件结构

主体部分由三个文件组成，必须放在项目的根目录，如下：

文件必填作用
app.js是小程序逻辑
app.json是小程序公共设置
app.wxss否小程序公共样式表

页面文件结构

页面由四个文件组成，分别是：

文件类型必填作用
js是页面逻辑 ( 微信小程序没有window和document对象 )
wxml是页面结构 ( XML语法，不是HTML语法 )
wxss否页面样式表 ( 拓展了rpx尺寸单位，微信专属响应式像素 )
json否页面配置 ( 不能写注释，否则编译报错 )

微信小程序配置

app.json 配置项列表

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

属性类型必填描述
pagesString Array是设置页面路径
windowObject否设置默认页面的窗口表现
tabBarObject否设置底部 tab 的表现
debugBoolean否设置是否开启 debug 模式

window配置

用于设置小程序的状态栏、导航条、标题、窗口背景色。

注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新，详见页面相关事件处理函数。
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

  1. 当设置 position 为 top 时，将不会显示 icon。
  2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性类型必填默认值描述
colorHexColor是tab 上的文字默认颜色
selectedColorHexColor是tab 上的文字选中时的颜色
backgroundColorHexColor是tab 的背景色
borderStyleString否blacktabbar上边框的颜色， 仅支持 black/white
listArray是tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
positionString否bottom可选值 bottom、top，设置成top是无图标

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性类型必填说明
pagePathString是页面路径，必须在 pages 中先定义
textString是tab 上按钮文字
iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

图示：

微信小程序组件(标签)

组件文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

常用布局标签

<view></view>				相当于    <div></div>
<text></text>				相当于    <span></span>
<image></image>				相当于    <img />
<navigator></navigator>		相当于    <a></a>
<block></block>				区块标签，不会渲染到页面

注意：image组件默认宽度300px、高度225px，很多时候我们都不需要这个默认宽高，记得手动设置宽高

常用表单标签

<button></button>
<input type="text" />				
<checkbox />
<radio/>

轮播图组件

<swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长">
	<swiper-item>
      	<image src="图片路径1" width="375" height="150"/>
    </swiper-item>
	<swiper-item>
      	<image src="图片路径2" width="375" height="150"/>
    </swiper-item>
</swiper>

探索：实现无缝轮播怎么办？

微信小程序页面函数

生命周期函数

Page({
  /** 页面的初始数据 */
  data: {
  },
  /** 生命周期函数--监听页面加载 */
  onLoad: function (options) {
  },
  /** 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {
  },
  /** 生命周期函数--监听页面显示 */
  onShow: function () {
  },
  /** 生命周期函数--监听页面隐藏 */
  onHide: function () {
  },
  /** 生命周期函数--监听页面卸载 */
  onUnload: function () {
  }
})

页面相关事件处理函数

 /** 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () {
  },
  /** 页面上拉触底事件的处理函数 */
  onReachBottom: function () {
  },
  /** 用户点击右上角分享 */
  onShareAppMessage: function () {
  }

WXML 布局

数据绑定 {{ }}

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

特别注意

  1. 花括号和引号之间不能有空格
  2. 不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。
<checkbox checked="false"> </checkbox>					其计算结果是一个字符串，转成 boolean 类型后变成了 true
<checkbox checked="{{false}}"> </checkbox>				正确写法

列表渲染 wx:for

<!--wxml-->
<view wx:for="{{array}}" > {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

wx:key 提高列表渲染时排序的效率

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

条件渲染 wx:if wx:else wx:elif

<!--wxml-->
<view wx:if="{{length >= 80}}"> 优秀 </view>
<view wx:elif="{{length >= 60}}"> 良好 </view>
<view wx:else> 加油 </view>

// page.js
Page({
  data: {
    length: '95'
  }
})

wx:if 与 hidden 区别

wx:if 是否渲染， hidden 是否隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。

因此，如果需要频繁切换的情景下，用 hidden 更好。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imIRiCIR-1603969864588)(.\img\image-20201026092637709.png)]

事件

  • 事件对象可以获取额外信息，如 id, dataset(自定义属性集合), touches(触摸点坐标)。

事件绑定和冒泡

  1. 冒泡事件 bind事件类型 如 bindtap bindlongpress
  2. 非冒泡事件 catch事件类型 如 catchtap catchlongpress

常用事件类型

类型触发条件
tap手指触摸后马上离开
longpress手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
<!--wxml-->
<view data-index="自定义属性" bindtap="tapHandle"> 点我触发事件 </view>

// page.js
Page({
  tapHandle: function(event) {
    console.log(event)
  }
})

事件传参注意

小程序绑定事件只能写函数名称，不能通过括号方式传参。

<!--wxml-->
<view bindtap="tapHandle(520)"> 点我触发事件 </view>								错误，事件不能触发
<view data-index="520" bindtap="tapHandle"> 点我触发事件 </view>	

// page.js
Page({
  tapHandle: function(event) {
     console.log( event.target.dataset.index );  // 输出标签自定义属性上的index值
  }
})

WXS 脚本

WXS（WeiXin Script）是小程序的一套脚本语言，功能类似<script>标签，用于在视图层定义函数(比较少用)。

<!--wxml-->
<wxs module="foo">
var sum = function(a,b){
  return a+b;
};
// 这里可以导出一个对象，这个对象可以直接在界面上使用 
module.exports.sum = sum;
</wxs>

<view> {{foo.sum}} </view>

WXSS 样式

WXSS(WeiXin Style Sheets)是一套样式语言。

与 CSS 相比，WXSS 扩展以下2个特性：

  • 尺寸单位 rpx ( responsive pixel 响应式像素)
  • 样式导入 @import “样式表路径”;

常用快捷键

快捷键说明
shift + alt + F格式化代码
ctrl + P跳到文件
ctrl + E跳到最近文件

微信小程序的子组件

1 子组件的概念和创建

2 page父向子组件component传参

通过给父组件属性，子组件通过properties接收传参

  json文件中引入
  
  {
      "component":true,
      "usingComponents": {
        "com":"../com/com"
      }
   }
  
  wxml
 
  <!-- 微信小程序父组件向子组件传参 -->
  <com message="{{message}}"  num="{{num}}"  ></com>
  
  js
  data: {
     message:"你好小程序",
     num:33
  },
  
  
  子组件
  properties: {
    message: {
      type: String,
      value: ""
    },
    num:{
      type: Number,
      value: 0
    }
  },

3 子组件componet向父page组件传参（两种方式）

第一种：通过triggerEvent

父组件

wxml
<com  bind:myevent="myevent" ></com>

js
myevent(e){
    console.log(e)
},

子组件

wxml
<button bindtap="clickhandlerparent"   >将数据发送给父组</button>

js
clickhandlerparent(){
      //通过triggerEvent
      this.triggerEvent('myevent',{"username":"admin"})
}

第二种 通过样式获取，注意：通过第二种获取子组件的数据形式是能够获取子组件所有的数据的

wxml
<com  class="list" ></com>

js
onShow: function () {
    const instance = this.selectComponent('.list');
    console.log(instance)  //第二种方式获取 
},

4 子组件的生命周期

created 组件实例化，但节点树还未导入，因此这时不能用setData

attached 节点树完成，可以用setData渲染节点，但无法操作节点

ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点

moved 组件实例被移动到树的另一个位置

detached 组件实例从节点树中移除

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

  • 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
  • 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
  • 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

具体参考官方：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

5 组件component与组件component进行传参

基本同page向component, component向page一样，具体大家可以参考以下链接

具体参考官方：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

微信小程序弹窗API

wx.showToast()

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

wx.showLoading()

wx.showLoading({
  title: '加载中',
})
 
setTimeout(function(){
  wx.hideLoading()
},2000)

wx.showToast
wx.showModal
wx.showLoading
wx.showActionSheet
wx.hideToast
wx.hideLoading

微信小程序请求AJAX的API

wx.request()

function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
        'X-Nideshop-Token': wx.getStorageSync('token') //这个可以根据实际情况写自己的
      },
      success: function (res) {
        console.log("success");

        if (res.statusCode == 200) {
          //这是后端给我们返回的
          if (res.data.errno == 401) {
            //需要登录后才可以操作
            wx.showToast({
              title: '请先登录',
              duration: 1000,
              success:function(){
                wx.reLaunch({
                  url: '/pages/auth/login/login',
                })
              }
            })

  
          } else {
            resolve(res.data);
          }
        } else {
          reject(res.errMsg);
        }

      },
      fail: function (err) {
        reject(err)
        console.log("failed")
      }
    })
  });
}

function get(url, data = {}) {
  return request(url, data, 'GET')
}

function post(url, data = {}) {
  return request(url, data, 'POST')
}

微信小程序跳转API

wx.switchTab      只能跳转到底部有tab的
wx.reLaunch       重新刷新界面的
wx.redirectTo     直接跳转的
wx.navigateTo    
wx.navigateBack   返回上一级

微信小程序缓存API

wx.setStorageSync

    wx.setStorage({
      key:"key",
      data:"value"
    })
    
    try {
      wx.setStorageSync('key', 'value')
    } catch (e) { }
    
wx.setStorage
    
wx.removeStorageSync
wx.removeStorage
wx.getStorageSync
wx.getStorageInfoSync
wx.getStorageInfo
wx.getStorage
wx.clearStorageSync
wx.clearStorage

微信小程序开放接口API

wx.login

通过login获取用户的res.code

function login() {
  return new Promise(function (resolve, reject) {
    wx.login({
      success: function (res) {
        if (res.code) {
          resolve(res.code);
        } else {
          reject(res);
        }
      },
      fail: function (err) {
        reject(err);
      }
    });
  });
}

wx.getUserInfo

function getUserInfo() {
  return new Promise(function (resolve, reject) {
    wx.getUserInfo({
      withCredentials: true,
      success: function (res) {
        if (res.detail.errMsg === 'getUserInfo:ok') {
          resolve(res);
        } else {
          reject(res)
        }
      },
      fail: function (err) {
        reject(err);
      }
    })
  });
}

wx.getSession

/**
 * 检查微信会话是否过期
 */
function checkSession() {
  return new Promise(function (resolve, reject) {
    wx.checkSession({
      success: function () {
        resolve(true);
      },
      fail: function () {
        reject(false);
      }
    })
  });
}

微信小程序扫码API

wx.scanCode

 
 wx.scanCode({
      success:function(res){
         console.log(res)
      },
      fail:function(err){
          console.log(err)
      }
   })

微信小程序之图片API

拍照选择图片

wx.chooseImage()

   
   wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        console.log(res)
        /*
        _this.setData({
          tempFilePaths:res.tempFilePaths
        })
        */
      }
    })

图片预览的接口

wx.previewImage()

 
 wx.previewImage({
      current:"https://pic4.zhimg.com/80/v2-9c1f1036fb0a8662fe2905f81f5c098c_1440w.jpg?source=1940ef5c", // 当前显示图片的http链接
      urls: [
        that.data.img,
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2703126199,2378852978&fm=26&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603689636941&di=8a6177a1c741e3cb7988ad51695bbec9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fpcdlc%2F1709%2F13%2Fc79%2F59091415_1505295112677.jpg'
      ] // 需要预览的图片http链接列表 这里的数据可以从接口请求
   })

关于wx.previewImage的一个案例

问题： 我们怎么将html静态页面所有的图片抽取出来预览呢?

这里我给大家介绍我用的一款封装好的工具叫WxParse，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-664B4Cf9-1603969864599)(.\img\image-20201026111744007.png)]

第一步：引入工具

var WxParse = require('../../lib/wxParse/wxParse.js');

第二步:请求接口信息

  onLoad(){
     var that=this
     wx.request({
       url:'http://hsxiao.myxiaohu.cn/api/goods/detail?id=1181000',
       success(res){
          console.log(res)
          console.log(res.data.data.info.goods_desc)
          /*
          that.setData({
            goods_desc:res.data.data.info.goods_desc
          })
          */
          //将数据挂载到全局的that上
          WxParse.wxParse('goodsDetail', 'html', res.data.data.info.goods_desc, that);
          
       }
     })
  },

第三步：在页面上直接写

  <view>
   <import src="../../lib/wxParse/wxParse.wxml" />
   <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
  </view>

http://hsxiao.myxiaohu.cn/api/goods/detail?id=1181000

我给大家表达的一个概念是我们能够通过一个工具将html中的所有的图片链接抽取出来

{
    "errno":0,
    "errmsg":"",
    "data":{
        "info":{
            "id":1181000,
            "category_id":1008008,
            "goods_sn":"1181000",
            "name":"母亲节礼物-舒适安睡组合",
            "brand_id":1001020,
            "goods_number":100,
            "keywords":"",
            "goods_brief":"安心舒适是最好的礼物",
            "goods_desc":"<p><img src="http://yanxuan.nosdn.127.net/3ddfe10db43f7df33ba82ae7570ada80.jpg" _src="http://yanxuan.nosdn.127.net/3ddfe10db43f7df33ba82ae7570ada80.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/7682b7930b4776ce032f509c24a74a1e.jpg" _src="http://yanxuan.nosdn.127.net/7682b7930b4776ce032f509c24a74a1e.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/e0bb6a50e27681925c5bb26bceb67ef4.jpg" _src="http://yanxuan.nosdn.127.net/e0bb6a50e27681925c5bb26bceb67ef4.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/ba63b244c74ce06fda82bb6a29cc0f71.jpg" _src="http://yanxuan.nosdn.127.net/ba63b244c74ce06fda82bb6a29cc0f71.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/3c7808c3a4769bad5af4974782f08654.jpg" _src="http://yanxuan.nosdn.127.net/3c7808c3a4769bad5af4974782f08654.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/71798aaac23a91fdab4d77e1b980a4df.jpg" _src="http://yanxuan.nosdn.127.net/71798aaac23a91fdab4d77e1b980a4df.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/c88cbb2dd2310b732571f49050fe4059.jpg" _src="http://yanxuan.nosdn.127.net/c88cbb2dd2310b732571f49050fe4059.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/5dfdcd654e0f3076f7c05dd9c19c15ea.jpg" _src="http://yanxuan.nosdn.127.net/5dfdcd654e0f3076f7c05dd9c19c15ea.jpg" style=""/></p><p><img src="http://yanxuan.nosdn.127.net/bd55d6ef7af69422d8d76af10ee70156.jpg" _src="http://yanxuan.nosdn.127.net/bd55d6ef7af69422d8d76af10ee70156.jpg" style=""/></p><p><br/></p>",
            "is_on_sale":1,
            "add_time":0,
            "sort_order":1,
            "is_delete":0,
            "attribute_category":0,
            "counter_price":0,
            "extra_price":0,
            "is_new":1,
            "goods_unit":"件",
            "primary_pic_url":"http://yanxuan.nosdn.127.net/6f3e94fa4b44341bda5a73224d605896.jpg",
            "list_pic_url":"http://yanxuan.nosdn.127.net/1f67b1970ee20fd572b7202da0ff705d.png",
            "retail_price":2598,
            "sell_volume":1533,
            "primary_product_id":1194000,
            "unit_price":0,
            "promotion_desc":"限时购",
            "promotion_tag":"",
            "app_exclusive_price":0,
            "is_app_exclusive":0,
            "is_limited":0,
            "is_hot":0
        },
        "gallery":[
            {
                "id":677,
                "goods_id":1181000,
                "img_url":"http://yanxuan.nosdn.127.net/355efbcc32981aa3b7869ca07ee47dac.jpg",
                "img_desc":"",
                "sort_order":5
            },
            {
                "id":678,
                "goods_id":1181000,
                "img_url":"http://yanxuan.nosdn.127.net/43e283df216881037b70d8b34f8846d3.jpg",
                "img_desc":"",
                "sort_order":5
            },
            {
                "id":679,
                "goods_id":1181000,
                "img_url":"http://yanxuan.nosdn.127.net/12e41d7e5dabaf9150a8bb45c41cf422.jpg",
                "img_desc":"",
                "sort_order":5
            },
            {
                "id":680,
                "goods_id":1181000,
                "img_url":"http://yanxuan.nosdn.127.net/5c1d28e86ccb89980e6054a49571cdec.jpg",
                "img_desc":"",
                "sort_order":5
            }
        ],
        "attribute":[
            {
                "value":"组合一：AB面独立弹簧床垫 进口乳胶150*200cm*1+可水洗抗菌防螨丝羽绒枕*2。
组合二：AB面独立弹簧床垫 进口乳胶180*200cm*1+可水洗抗菌防螨丝羽绒枕*2",
                "name":"规格"
            },
            {
                "value":"活动时间：5月8日0点-5月14日24点。
请在以上时间段内购买，其余时间均不可享受组合装优惠。",
                "name":"重要提醒"
            }
        ],
        "userHasCollect":0,
        "issue":[
            {
                "id":1,
                "goods_id":"1127052",
                "question":"购买运费如何收取？",
                "answer":"单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。
(港澳台地区需满"
            },
            {
                "id":2,
                "goods_id":"1127052",
                "question":"使用什么快递发货？",
                "answer":"严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除"
            },
            {
                "id":3,
                "goods_id":"1127052",
                "question":"如何申请退货？",
                "answer":"1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，"
            },
            {
                "id":4,
                "goods_id":"1127052",
                "question":"如何开具发票？",
                "answer":"1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以"
            }
        ],
        "comment":{
            "count":96,
            "data":{
                "content":"布料很厚实，触感不错，洗过之后不缩水不掉色",
                "add_time":"2017-05-05 14:01:39",
                "pic_list":[
                    {
                        "id":1,
                        "comment_id":1,
                        "pic_url":"https://yanxuan.nosdn.127.net/218783173f303ec6d8766810951d0790.jpg",
                        "sort_order":5
                    }
                ]
            }
        },
        "brand":{
            "id":1001020,
            "name":"Ralph Lauren制造商",
            "list_pic_url":"http://yanxuan.nosdn.127.net/9df78eb751eae2546bd3ee7e61c9b854.png",
            "simple_desc":"我们与Ralph Lauren Home的制造商成功接洽，掌握先进的生产设备，传承品牌工艺和工序。追求生活品质的你，值得拥有。",
            "pic_url":"http://yanxuan.nosdn.127.net/089e4066f0c2bc6b062d17c6292735dc.png",
            "sort_order":20,
            "is_show":1,
            "floor_price":29,
            "app_list_pic_url":"http://yanxuan.nosdn.127.net/9df78eb751eae2546bd3ee7e61c9b854.png",
            "is_new":0,
            "new_pic_url":"",
            "new_sort_order":10
        },
        "specificationList":[
            {
                "specification_id":1,
                "name":"颜色",
                "valueList":[
                    {
                        "id":1,
                        "goods_id":1181000,
                        "specification_id":1,
                        "value":"1.5m床垫*1+枕头*2",
                        "pic_url":"",
                        "name":"颜色"
                    },
                    {
                        "id":2,
                        "goods_id":1181000,
                        "specification_id":1,
                        "value":"1.8m床垫*1+枕头*2",
                        "pic_url":"",
                        "name":"颜色"
                    }
                ]
            },
            {
                "specification_id":2,
                "name":"规格",
                "valueList":[
                    {
                        "id":3,
                        "goods_id":1181000,
                        "specification_id":2,
                        "value":"浅杏粉",
                        "pic_url":"http://yanxuan.nosdn.127.net/10022c73fa7aa75c2c0d736e96cc56d5.png?quality=90&thumbnail=200x200&imageView",
                        "name":"规格"
                    },
                    {
                        "id":4,
                        "goods_id":1181000,
                        "specification_id":2,
                        "value":"玛瑙红",
                        "pic_url":"http://yanxuan.nosdn.127.net/29442127f431a1a1801c195905319427.png?quality=90&thumbnail=200x200&imageView",
                        "name":"规格"
                    },
                    {
                        "id":5,
                        "goods_id":1181000,
                        "specification_id":2,
                        "value":"烟白灰",
                        "pic_url":"http://yanxuan.nosdn.127.net/36f64a7161b67e7fb8ea45be32ecfa25.png?quality=90&thumbnail=200x200&imageView",
                        "name":"规格"
                    }
                ]
            }
        ],
        "productList":[
            {
                "id":1,
                "goods_id":1181000,
                "goods_specification_ids":"1_3",
                "goods_sn":"Y100300",
                "goods_number":100,
                "retail_price":999
            },
            {
                "id":2,
                "goods_id":1181000,
                "goods_specification_ids":"1_4",
                "goods_sn":"Y100400",
                "goods_number":200,
                "retail_price":1500
            },
            {
                "id":3,
                "goods_id":1181000,
                "goods_specification_ids":"1_5",
                "goods_sn":"Y100500",
                "goods_number":300,
                "retail_price":1000
            },
            {
                "id":4,
                "goods_id":1181000,
                "goods_specification_ids":"2_3",
                "goods_sn":"Y200300",
                "goods_number":400,
                "retail_price":1001
            },
            {
                "id":5,
                "goods_id":1181000,
                "goods_specification_ids":"2_4",
                "goods_sn":"Y200400",
                "goods_number":2,
                "retail_price":2000
            },
            {
                "id":6,
                "goods_id":1181000,
                "goods_specification_ids":"2_5",
                "goods_sn":"Y200500",
                "goods_number":0,
                "retail_price":3000
            }
        ]
    }
}

引用的一些案例

底部tabbar选项卡

沉浸式导航

ange997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序入门到精通
zhangxiaobai___的博客
11-10 580
微信 小程序入门
uni-app小程序从入门到精通
weixin_58677208的博客
05-28 313
1.准备工作 下载Hbuilderx App版 Hbuilderx 下载 下载微信开发者工具 微信开发者工具 下载 打开Hbuilderx 创建uni-app 项目 打开微信小程序开发者工具 选择创建的项目运行到微信开发者工具，在第一次运行的时候需要配置微信开发者工具的文件路径，也就是说你的微信开发者工具安装在哪里的就是哪个路径，当路径配置成功后还需要打开微信开发者工具的端口号配 这个时候在运行就可以成功运行啦 2.文件夹介绍 uni-app 呢就是基于vue 的，文件路径
微信小程序开发者文档教程，从入门到精通 (附超过100个完整项目源代码、文档)
热门推荐
wyx100的专栏
09-26 6万+
微信小程序开发者文档教程，从入门到精通 多种实例源代码 超过100个完整项目源代码、文档
微信小程序源码-仿酷狗音乐微信小程序
09-28
微信小程序源码，案例，模仿酷狗音乐
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
国际象棋-联机游戏-微信小程序源码
最新发布
12-20
这是一个微信小程序局域网内WiFi联机对战源码例子【国际象棋-联机游戏】项目，完整，可通过微信开发工具小程序方式打开，可正常编译运行，供学习可参考以下两个详解文章： ①国际象棋-单机游戏 ...
中国象棋-联机游戏-微信小程序源码
02-25
这是一个微信小程序局域网内联机对战源码例子【中国象棋-联机游戏】项目，完整，可通过微信开发工具小程序方式打开，可正常编译运行，供学习可参考以下两个详解文章： ①中国象棋-单机游戏 ... ②让小程序游戏支持联机...
国际象棋-单机游戏-微信小程序项目源码
04-25
这是一个微信小程序源码【国际象棋-单机游戏】项目完整例子，还有 可通过微信开发工具小程序方式打开，可编译运行，还有 这是棋盘类游戏，与中国象棋玩法不一样，还有 可供学习研究参考，有相关配套的文章...
微信小程序从入门到精通（案例）
08-20
资源为微信小程序从入门到精通的案例代码，有详细的注释，对微信小程序感兴趣的朋友可以下载
小程序入门到精通一篇就够了！
z27566的博客
02-28 964
微信小程序，简称小程序，英文名 MiniProgram ，是一种不需要下载安装即可使用的应用，它实现了应用 “ 触手可及 ” 的梦想，用户扫一扫或者搜一下即可打开应用。对于开发者而言，小程序 开发门槛相对较低 ，难度不及 APP，能够满足简单的基础应用。​小程序的主要开发语言是 JavaScript ，小程序的开发 同 普通的网页开发相比有很大的 相似性。开发微信程序必须要安装官方的 开发工具，此工具不但是编写代码所用的工作，还是 开发编译小程序 在电脑上能看到代码运行效果的 模拟器，所以一定要安装。
微信小程序0基础到精通
少侠且慢的博客
11-07 470
写在开头：此篇文章只是简单描述了一下一条学习路线，具体学习资源获取方式请看文末 第一步： 想快速入门小程序开发就需要从必备的API和核心开发等基础知识入手，建立整个小程序的知识体系。 学习目标： 新手入门与项目实战 课程重点： 1.小程序核心技术，常用API精讲 2.小程序开发思想，学会举一反三 3.构建一个实用的电影小程序项目 即将收获： 0基础入门 常用API 第二步： 深入学习小程序组件化开发思想，将进一步提高你对小程序的应用能力，有能力应对多种应用场景，进而进军商业级开发。 学习目标： 小程序商业
【微信小程序入门到精通】— 项目准备
热爱生活，积极向上的阿酱！
09-16 2401
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！此篇文章我们主要讲一下如何在微信小程序中新建页面，作为我们的编辑页面如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！.js.json.wxml.wxss他们分别起到不同的作用，接下来我们逐一解释这一篇文章主要为了后面的学习做基础！大家一定要动手操作呀！✨原创不易，还希望各位大佬支持一下。
微信小程序怎么扩展服务器,小程序服务器可扩展的配置方案
weixin_39640883的博客
08-06 487
驱动盘 如果仅仅搭建一个小程序来玩一玩的话，那么有台机器简单的配置一下即可。装数据库服务、HTTP服务器、配置HTTPS证书，后面的这一项看起来复杂一些，按照证书的签发流程即可。这些不是当下讲的主要内容。我们的主旨就是配置可以动态扩展方案一、主机可以选择目前市场上的各种云主机，最开始的时候可以选择基本的(最便宜配置)， 1核1G内存之类的都是可以的，现在还有各种活动，基本上是人人都可以玩的，可以...
微信小程序开发流程(一)
u014769864的博客
04-12 559
C:\Users\Administrator>node -v v10.15.3 C:\Users\Administrator>npm -v 6.4.1 C:\Users\Administrator>
微信小程序入门教程
shykevin的博客
06-02 470
对于从入门学微信小程序，可以看阮一峰的教程。 主要有4篇： 《微信小程序入门教程之一：初次上手》，链接：http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html 《微信小程序入门教程之二：页面样式》，链接：http://www.ruanyifeng.com/blog/2020/10/wecha...
数组的扩容和缩容
zhouym_的博客
04-17 806
数组的扩容和缩容 import java.util.Arrays; /* * 数组的扩容和缩容 * 动态扩容 * 1.使用for循环复制元素扩容 * 缺陷: 拷贝一部分元素需要计算索引,比较复杂 * 2.System.arracopy()扩容 * 缺陷: 拷贝数组的一部分到目标数组,如果长度超过了目标数组的索引,会抛出异常 * 3.Arrays.copyOf扩容 * ...
微信小程序开发过程
meiwanlanjun的博客
01-25 367
它支持多种编程语言，如 JavaScript、C++、Java、Python、HTML、CSS 等，提供了丰富的插件和扩展，可以提高开发效率。：是微信官方提供的小程序开发工具，支持小程序项目的创建、调试、预览、发布等功能。注意：在进行微信小程序的开发时需要遵循微信小程序的指引和规范, 需要先申请小程序账号并通过审核，才能使用微信开发者工具进行项目的创建和发布。另外, 需要注意的是, 在预览和发布项目之前，需要在微信开发者工具中配置小程序的 AppID 和项目路径，以便能够正确的预览和发布项目。
怎么把uview-ui兼容到微信小程序啊
07-14
要将uview-ui兼容到微信小程序，你可以按照以下步骤进行操作： 1. 下载uview-ui的源代码，可以从uview官方的GitHub仓库获取。 2. 将下载的源代码解压，并将其放置在微信小程序项目的根目录下。 3. 在微信开发者工具...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值