微信小程序基本使用
fengshaopu
这个作者很懒,什么都没留下…
展开
-
优选商品小程序
分析做法:1.首页2.分类3.商品列表4.商品详情5.购物车6.支付7.授权8.问题反馈一、首页1.首先布局1.上面那个搜索可以拆出去因为后面也要用2.轮播图也可以拆出去然后就获取接口渲染 用 wx:for="{{数组 }}"、用到的接口:轮播图 https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata分类 https://api-hmugo-web.itheima.net/api/public/v1/ho原创 2021-05-17 21:59:52 · 929 阅读 · 0 评论 -
小程序发布流程
发布流程:1.在小程序里面设置服务器域名2.在开发程序里面发布代码3.发布小程序一、在小程序里面设置服务器域名1.打开网站中的小程序:https://mp.weixin.qq.com/wxamp/devprofile/get_profile? token=1163940945&lang=zh_CN点击开发管理,点开开发设置 下面有设置服务器域名的二、在小程序开发工具里面上传代码1.点击上传...原创 2021-05-17 10:55:23 · 1122 阅读 · 1 评论 -
小程序如何选择图片
一、先布局 <button size="mini" > <i class="iconfont icon-tupian"></i> </button> <image src=""></image>第二部点击事件 ,用小程序的选择图片组件 :https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.cho原创 2021-05-14 14:53:58 · 608 阅读 · 0 评论 -
授权登录小程序
首先页面得有一个button按钮<button>授权</button>然后点击授权 的话得获取用户信息 button小程序按钮有属性open-type 里面定义 getUserInfo 这个是 获取用户信息 从bindgetuserinfo回调中获取到用户信息然后就设置点击事件这次的事件是bindgetuserinfo<button open-type="getUserInfo" bindgetuserinfo="bindgetuserinfo"&原创 2021-05-13 17:16:44 · 114 阅读 · 2 评论 -
小程序支付流程
点击支付的时候需要:1.判断鉴权 2.获取到本地存储中的tonken 如果有的话就证明登录过了如果没有的话就木登录就去登录页面 var token = wx.getStorageSync('token') //获取本地存储的token console.log(token); var zon=this.data.zon console.log(zon); if (!token) { //没有token值就让他去登录 wx.navigateTo({原创 2021-05-13 16:57:47 · 112 阅读 · 0 评论 -
小程序获取收货地址流程
点击button按钮后写一个点击事件,然后用wx小程序里面的组件获取到收货地址就好,在原来的wx里面还得判断授权,现在更新了不用判断了直接使用就可以获取到收货地址了,然后我们把收获地址存到本地存储里面下个页面用:获取收获地址的网站可参考:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/address/wx.chooseAddress.html一、先看布局 <button >+添加收货地址</button&原创 2021-05-13 15:50:46 · 1130 阅读 · 0 评论 -
小程序如何写收藏、分享、客服功能
如果要写客服、分享、收藏的话也是挺简单的:收藏:首先我们要有两给iconfont字体图标 没有的话可以去:https://www.iconfont.cn/ 里面找一、收藏1.找到之后,我们可以在data里面设置一个初始值,当点击了以后改成truedata(){ f:false}2.然后在页面中布局 <view class="v"> //这个就是空的没有收藏的时候显示的 <view class="iconfont icon-shoucang" id="q" wx:原创 2021-05-13 15:12:19 · 216 阅读 · 0 评论 -
微信小程序时间戳转换
拷贝至项目utils/utils.js中,并注意在js中声明下;module.exports = { formatTime: formatTime, // 日期转时间戳 formatTimeTwo: formatTimeTwo // 时间戳转日期}utils/utils.js 里面写函数function formatTime(date) { var year = date.getFullYear(); var month = date.getMonth()原创 2021-05-13 11:50:07 · 484 阅读 · 0 评论 -
小程序里面的本地存储
同步的wx.setStorageSync(“key”, data); //存值 key是健名 ,data是数据wx.getStorageSync(‘key’) //取值 key是本地存储的健名 转子:https://blog.csdn.net/weixin_43638968/article/details/108864294?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162081053016780265411508%2522%252原创 2021-05-12 17:09:13 · 165 阅读 · 0 评论 -
小程序添加购物车
首先获取本地存储必须是数组才能使用findIndex查找出来如果是-1就是没有任然后把num还有checkobx的初始值加进去如果有就num++ gwc(e) { var k = wx.getStorageSync("k") || [] var index = k.findIndex(v => v.goods_id === this.data.list1.goods_id) console.log(index); if (index == -1) {原创 2021-05-12 16:29:15 · 240 阅读 · 2 评论 -
微信小程序 图片预览用map方法
第一步获取到图片的数组 还有点击的index var a = res.data.message.pics var x=e.currentTarget.dataset.index第二步用map方法获取到里面想要看到的所以图片地址 var b=this.data.list.map(v=>v.pics_big)然后用wx小程序里面的一个组件wx.previewImage({ current: b[x], // 当前显示图片的http链接 urls: b // 需要预原创 2021-05-11 15:47:52 · 335 阅读 · 0 评论 -
小程序的下拉刷新跟点进去刷新上拉加载
进去刷新:第一步,在json中: "backgroundTextStyle": "dark", "enablePullDownRefresh": true第二步在,请求接口前面时:写 wx.showLoading({ title: '刷新中...', })请求结束以后: wx.hideLoading();```gh() { wx.request({ url: `https://api-hmugo-web.itheima.net/api原创 2021-05-11 13:57:26 · 112 阅读 · 0 评论 -
小程序借口传值拼接
首先获取到值: var id = options.id console.log(id);然后对应借口传值就好: app.http.f3(id).then((res)=>{ console.log(res); })然后在那边接收:拼接function f3(id){ return g(baseUrl+k.f3+"?goods_id="+id,{},"get") }...原创 2021-05-10 21:24:15 · 225 阅读 · 0 评论 -
微信小程序点进去加载
点进去页面加载第一步需要在全局的app.json中设置: "enablePullDownRefresh": true //开启下拉刷新第二步:然后在点击进去的js需要进去的页面请求借口前设置: wx.showLoading({ title: '刷新中...', })第三步:然后在借口请求完毕后写: wx.hideLoading(); // 3. 停止下拉刷新,在需要刷新结束时调用该api,否则,页面将会保持下拉状态、不会回弹。原创 2021-05-10 20:44:17 · 1321 阅读 · 0 评论 -
路由跳转小程序
一、组件跳转第一中方式:<navigator url="/pages/wd/wd" open-type = "redirect">wd</navigator >url 路径 open-type 这是跳转方式 1. navigator 是只能跳转没有tabBar的有返回按钮 可以传值2.switchTab 只能跳转tabBar的页面 不可传值 会报错3.reLaunch 随便跳转 可以传值第二种: wx.navigateTo({原创 2021-05-08 11:57:23 · 126 阅读 · 0 评论 -
微信小程序封装Promise
我们为什么要分装Promise:因为减少步骤, wx.request({ //请求借口 url: url, //借口地址 data:data, //请求的参数 method:method, // 什么请求 git 或者 post success:((res)=>{ //success 正确的返回值 resolove (res) }),原创 2021-05-07 18:52:38 · 678 阅读 · 1 评论 -
小程序组件拆分父传子
第一先在父组件中定义数据或者图片,轮播等等、<swiper> <swiper-item> <image src="//scpic2.chinaz.net/Files/pic/pic9/202104/bpic23090_s.jpg"></image> </swiper-item></swiper>二、设置一个组件状态把这个拆出去首先要在json里面设置组件为true "compoents":"true",原创 2021-05-07 11:49:03 · 163 阅读 · 1 评论 -
微信小程序
一、小程序一、下载第一网址:https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=9186324931.注册好以后登录二、使用2.开发工具,里面有开发者工具下载 。https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html根据自己的配置下载。.下载好以后 是:1.点击加号或者新建2.1.项目名称可以随便起2.目录3.APPID在原创 2021-05-06 21:22:53 · 242 阅读 · 2 评论