微信小程序账号与工具

在线文档：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 等。

属性 类型 必填 描述
pages String Array 是 设置页面路径
window Object 否 设置默认页面的窗口表现
tabBar Object 否 设置底部 tab 的表现
debug Boolean 否 设置是否开启 debug 模式

window配置

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

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

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"
navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

tabBar

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

Tip：

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

属性说明：

属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上边框的颜色， 仅支持 black/white
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top，设置成top是无图标

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

属性 类型 必填 说明
pagePath String 是 页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath String 否 选中时的图片路径，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)]

事件

事件绑定和冒泡

  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>jsdata: {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(){//通过triggerEventthis.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.setStorageSyncwx.setStorage({key:"key",data:"value"})try {wx.setStorageSync('key', 'value')} catch (e) { }wx.setStoragewx.removeStorageSync
wx.removeStorage
wx.getStorageSync
wx.getStorageInfoSync
wx.getStorageInfo
wx.getStorage
wx.clearStorageSync
wx.clearStorage

微信小程序开放接口API

wx.login

通过login获取用户的res.codefunction 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, // 默认9sizeType: ['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=thiswx.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选项卡

沉浸式导航

12-08-微信小程序笔记扩容加强版相关推荐

  1. 12.通过微信小程序端访问企查查（采集工商信息）

    12.通过微信小程序端访问企查查(采集工商信息) 需要注意的问题: 一.1.微信端访问企查查小程序需要登录.2.访问抓包获取的url是有时效性的过一段时间就不能用了. http://xcx.qicha ...

  2. 微信小程序笔记（三）Wepy使用记录—Stylus预编译基本使用

    Wepy使用记录-Stylus预编译基本使用 坏境搭建请前往wepy框架官网 淘宝 NPM 镜像 wepy新建wpy初始化模板参考 创建空项目   使用wepy init empty 项目名称命令来创 ...

  3. 微信小程序笔记六模块化 —— module.exports

    微信小程序中所有 js 文件作用域皆为独立的,每一个 js 文件即为一个模块.模块与模块之间的引用通过 module.exports 或 exports 对外暴露接口. 注意: exports 是 m ...

  4. 【Cxinny】微信小程序笔记

    事件绑定 bindtap:类似click bindinput:文本框的输入事件 bindchange:状态改变时触发 事件对象的属性列表event target是触发该事件的源头组件,而current ...

  5. 微信小程序笔记（一）初次接触小程序开发

    微信小程序的初步使用   昨个写了个Vue的小练习,今天再来个微信小程序的练习.数据绑定上大致跟vue的用法差不多,可惜了不会CSS,要不写起来能顺溜不少.这么一看还是写Android顺手. 1.创建 ...

  6. 微信小程序笔记、小程序打印

    小程序介绍 目录结构 app.js //程序的入口 App({//小程序的生命周期函数onLaunch: function () {this.globalData.sysinfo = wx.getSy ...

  7. 微信小程序笔记--显示五星好评（注意是显示不是点击评价！）

    网上看了好多都是点击事件实现五星评价,想做一个只显示五星的微信小程序模板,结果网上都不全,所以还是自己写一个免得忘记,学艺不精,如果你有更好的方法请一定要留下评论或者私信给我,十分感谢! 1.先上一个 ...

  8. 【web】微信小程序笔记小结（模板与配置）

    来源:黑马程序员前端微信小程序开发教程 目录 I. WXML 模板语法 ① 数据绑定 ※※ 基本原则 ※※ 在 data 中定义数据 ※※ 在 WXML 中使用数据 ※※※※ Mustache 语法的 ...

  9. Java 微信小程序笔记 二、 微信支付退款案例

    一.前期准备工作: 上篇博客配置的一些参数和文件Jar包 都要用到 微信支付需要小程序和商户绑定 APP绑定微信商户平台获取商户id(mchID). 证书(商户后台下载). 支付签名密钥(商户后台设置 ...

最新文章

  1. matlab 打开txt文件窗口,Matlab读取txt文件、xlsx文件
  2. OpenCV计算机视觉应用程序的交互式视觉调试
  3. Android ProgressBar 反向进度条/进度条从右到左走
  4. java 怎么判断1_1.0_1.00是同一个数_php如何优雅的判断 0.0/0.00/0.000 是否为空？ 测试过用empty函数不行...
  5. 【教女朋友学网络系列3】之手把手教她明白交换机的基本原理
  6. 在同一个workprocess里对两张表分别使用online update和update function module update
  7. [HTML]去除li前面的小黑点,和ul、LI部分属性
  8. 镜像服务器文件实时监控同步程序
  9. c# Chart 服务器端动态创建ChartArea
  10. Mysql中外键的 Cascade ，NO ACTION ，Restrict ，SET NULL
  11. 红linux系统,红帽linux系统官方下载-红帽linux系统32位v9.0 完整版 - 极光下载站
  12. 打印机显示服务器连接错误怎么回事,打印机处于错误状态是怎么回事 打印机处于错误状态如何解决【图文详解】...
  13. 安庆集团-冲刺日志（第四天）
  14. 用MySQL绘制新年祝福图形_2020年春节，你有哪些与众不同的祝福语？
  15. 【NLP】第8章 将 Transformer 应用于法律和财务文件以进行 AI 文本摘要
  16. Sphinx全文索引搜索常见的一些错误处理收集
  17. 十三届蓝桥杯基础知识大全
  18. 农历类==解析指定的日期 1900-2100
  19. ffmpeg给视频添加背景音乐
  20. 集成学习与模型融合（kaggle-Elo Merchant Category Recommendation）

热门文章

  1. 一线城市写字楼怎么了，总面积的一半都租不出去
  2. 色弱限制计算机生物学专业,男孩色弱报什么专业好 限制专业有哪些
  3. 任意进制转换(转化器，算法，类)
  4. android属性动画不流畅,Android动画之属性动画
  5. 分享：软件全面国产化替代，10款数据库TPC-C测评哪家强
  6. 乐视TV超级电视今日发布 互联网入侵传统电视
  7. NPOI 导出xlsx 出现的问题解决方案
  8. 图像数据标注工具labelme使用教程
  9. win11之cmd终端输入 cd 转不同盘目的目录命令失效
  10. 2023年 假期 和 调休（法定）