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

最新推荐文章于 2024-10-30 23:59:42 发布
最新推荐文章于 2024-10-30 23:59:42 发布
阅读量1.9k 收藏
点赞数
分类专栏： 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选项卡

沉浸式导航

微信小程序入门到精通
zhangxiaobai___的博客
11-10 716
微信 小程序入门
《架构300讲》学习笔记（201-250）
CERTAINTY的博客
03-18 288
《架构300讲》学习笔记（201-250）
微信小程序开发者文档教程，从入门到精通 (附超过100个完整项目源代码、文档)
热门推荐
wyx100的专栏
09-26 6万+
微信小程序开发者文档教程，从入门到精通 多种实例源代码 超过100个完整项目源代码、文档
微信小程序从入门到精通
zxdznyy的博客
05-10 3206
本篇文章是我在学习微信小程序时写的一套笔记，比较全面，希望给大家带来帮助。
【微信小程序】微信小程序开发：从入门到精通
沐风—云端行者
02-04 3882
随着移动互联网的普及，微信小程序成为了越来越多企业和个人开发者的首选。小程序是一种无需下载安装即可使用的应用，用户只需扫描二维码或搜索即可打开使用，具有轻便快捷、易于推广的优点。本文将为大家详细介绍微信小程序的开发流程，帮助大家从入门到精通，成为一名优秀的小程序开发者。
Golang笔记
怨行客
10-18 638
协程是用户态轻量级线程协程是线程调度的基本单位通常在函数前加上go关键字就能实现并发。一个Goroutine会以一个很小的栈启动2KB或4KB，当遇到栈空间不足时，栈会自动伸缩， 因此可以轻易实现成千上万个goroutine同时启动。
《浪潮之巅》第三版读书总结--了解过去，才能把握未来（三）
king阿金
01-06 2310
文章目录信息产业的规律70-20-10定律诺维格定律基因决定定律硅谷的摇篮--斯坦福大学纽曼加洪堡的教育模式创业的孵化器科技公司的吹鼓手--投资银行定义与作用华尔街与美国的金融体系著名的投行：高盛与摩根斯坦利高盛摩根斯坦利科技公司的上市过程华尔街左右并购的举例Google的成功之道上市早期岁月的创始人、核心技术与商业模式、公司文化（TGIF）公司作风--不作恶；用人--英雄主义与群众路线及秘密军团...
公司运营-社会工程管理
aming小老弟
12-01 776
一、按社会功能划分的核心群体2025年中国百强城市名单前1~2线城市 三级分销 三级分销模式是一种分销策略， 基于多层级代理关系，通过发展下级分销商来扩大市场覆盖和提升销售业绩。销售过程中，将费用分为进行分配，每个等级都有相应的。品牌商或企业作为一级分销商，发展下级分销商形成二级、三级分销网络。每个分销商都可以继续向下发展自己的分销商，但分销层级最多只能有三级。分销商只能所得的佣金，超过三级的部分则无法获得佣金。谁卖出谁拿销售佣金：无论分销商处于哪个级别，他们销售商品所获得的都是一致的。这种设计方式保证了
商城-文档
weixin_46925850的博客
07-28 8395
谷粒商城学习笔记
微信小程序从入门到精通（案例）
08-20
资源为微信小程序从入门到精通的案例代码，有详细的注释，对微信小程序感兴趣的朋友可以下载
uni-app小程序从入门到精通
weixin_58677208的博客
05-28 483
1.准备工作 下载Hbuilderx App版 Hbuilderx 下载 下载微信开发者工具 微信开发者工具 下载 打开Hbuilderx 创建uni-app 项目 打开微信小程序开发者工具 选择创建的项目运行到微信开发者工具，在第一次运行的时候需要配置微信开发者工具的文件路径，也就是说你的微信开发者工具安装在哪里的就是哪个路径，当路径配置成功后还需要打开微信开发者工具的端口号配 这个时候在运行就可以成功运行啦 2.文件夹介绍 uni-app 呢就是基于vue 的，文件路径
微信小程序开发教程：从入门到精通
最新发布
孤客科技
10-30 2065
微信小程序是腾讯推出的一种轻量级应用，用户无需下载和安装，可以直接在微信中使用。它旨在提供更便捷的服务与体验。.js：JavaScript 文件，处理逻辑。.json：配置文件，定义页面的窗口表现。.wxml：模板文件，结构化页面。.wxss：样式文件，定义页面样式。通过本教程，你已经掌握了微信小程序的基本开发流程和常用功能。你可以根据自己的需求，扩展更多功能，打造出更加丰富的小程序应用。
《微信小程序从入门到精通》
IOSSHAN的博客
11-24 1379
hr >：一条分割线对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格相当于，不管屏幕多大，都分为750分，按照UI给的图，直接写就行，不需要适配屏幕了。貌似比较高级。
小程序入门到精通一篇就够了！
z27566的博客
02-28 1116
微信小程序，简称小程序，英文名 MiniProgram ，是一种不需要下载安装即可使用的应用，它实现了应用 “ 触手可及 ” 的梦想，用户扫一扫或者搜一下即可打开应用。对于开发者而言，小程序 开发门槛相对较低 ，难度不及 APP，能够满足简单的基础应用。​小程序的主要开发语言是 JavaScript ，小程序的开发 同 普通的网页开发相比有很大的 相似性。开发微信程序必须要安装官方的 开发工具，此工具不但是编写代码所用的工作，还是 开发编译小程序 在电脑上能看到代码运行效果的 模拟器，所以一定要安装。
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 1万+
如果还要不懂运行不出效果可以私信博主
微信小程序0基础到精通
少侠且慢的博客
11-07 563
写在开头：此篇文章只是简单描述了一下一条学习路线，具体学习资源获取方式请看文末 第一步： 想快速入门小程序开发就需要从必备的API和核心开发等基础知识入手，建立整个小程序的知识体系。 学习目标： 新手入门与项目实战 课程重点： 1.小程序核心技术，常用API精讲 2.小程序开发思想，学会举一反三 3.构建一个实用的电影小程序项目 即将收获： 0基础入门 常用API 第二步： 深入学习小程序组件化开发思想，将进一步提高你对小程序的应用能力，有能力应对多种应用场景，进而进军商业级开发。 学习目标： 小程序商业
【微信小程序入门到精通】— 项目准备
热爱生活，积极向上的阿酱！
09-16 2479
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！此篇文章我们主要讲一下如何在微信小程序中新建页面，作为我们的编辑页面如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！.js.json.wxml.wxss他们分别起到不同的作用，接下来我们逐一解释这一篇文章主要为了后面的学习做基础！大家一定要动手操作呀！✨原创不易，还希望各位大佬支持一下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值