小程序第二天

1.在页面 xx.wxml里面绑定事件;
bindtap 单击事件(会冒泡)
不想要冒泡 catchtap
bindtouchstart
bindxxx, bind开头的会冒泡;catchxxx ,catch开头的不会冒泡;
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

  1. 事件触发的函数 写在 js里面和data是同级;
  2. 事件函数里面e是事件参数 里面有坐标触发的目标 ;
    e.detail 坐标
    参数只能 写 自定义属性 data-xxx:
    <button bindtap="abc" data-id="1" data-name="张三">点击</button>
    参数怎么获取:
    e.target.dataset.id
    e.target.dataset.name

1.双向数据绑定 vue angular
v-model 文本框绑定的值一改变就全改变 只需要写好即可 框架会自动给你触发;

  1. 单向数据绑定
    没有v-model这种功能了 数据改变 需要你自己写代码去做;

怎么改变数据?this.setData()
this.setData({username:“另一个值”})
bindinput 文本框值改变就会触发这个事件

移动端:

  1. 百分比;
  2. rem 现在比较流行的;
  3. rpx 微信小程序特有的,微信已经给你计算好了比例 你直接用;
    750rpx 百分百;
    375rpx 一半屏幕;
    (也可以用百分比);

小程序怎么发送一个类似ajax请求,没有跨域概念
wx.request({
url:"...",
data: ,
success:function(res){
}
})
如果真实开发 需要在 小程序账号里面配置你要请求的地址;

申请域名服务器
1,阿里云买域名 www.abc.com

  1. 买服务器 配置域名和服务器的对应关系
  2. 服务器域名需要备案 (现在一般需要20天) ××× 合同单

发请求——如果成功之后再发送,那么会一直在success里面嵌套下去
这种一直嵌套的函数 会形成 地狱回调,新语法 promise 可以解决这个问题。
module.exports 导出东西给别人用
require 导入别人的东西来用
new Promise((resolve, reject) => {
wx.request({
url: https://locally.uieee.com/${url},
data: data,
success: resolve,
fail: reject
})
})

new Promise 给一个承诺
resolve 成功会触发这个
reject 失败会触发这个

使用
必须.then才会去拿到结果
返回的promise对象.then(function(){
//成功会执行这个函数 就是resolve
},
function(){
//失败 就是reject
}
)
promise资料
http://es6.ruanyifeng.com/#docs/promise

跳转要使用 navigator 这个标签

  1. 轮播图
    是否可以点击跳转 如果有link这个属性就可以跳转 没有就不行
    <navigator wx:if="{{item.link}}" url="{{item.link}}">
    <image src="{{item.image}}" mode="aspectFill"/>
    </navigator>
    <image wx:else src="{{item.image}}" mode="aspectFill"/>

2.九宫格
跳转到list页面

<navigator class="item" url="/pages/list/list?cat={{item.id}}

cat当前分类
如果点击跳转到了list页面
list页面
1.获取到你是哪个分类
在 onLoad: function (options) {
//options获取到的是url传过来的参数
}

  1. 发送请求拿到当前分类的数据
  2. 显示当前分类的商品
    设置头部中间的名字
  3. 在json里面配置 但是这种是写死
  4. 使用js代码来操作
    wx.setNavigationBarTitle({
    title: ‘美食‘ })
    渲染当前分类的数据
    下拉加载 不需要你去判断 你只需要配置好
    list.json
    "onReachBottomDistance": 20 距离底部20px的时候就触发去加载下一页

触发的函数在
list.js
onReachBottom: function () {
// console.log(‘到底了,别拉了‘)
// 在这里加载下一页的数据
//发送请求获取下一页的数据显示追加到页面上
loadMore()函数是封装的发送request请求下一页
下拉刷新 配置
list.json
"enablePullDownRefresh": true, 启用下拉刷新
刷新触发的函数
list.js
onPullDownRefresh: function () {
// 发送请求获取 到第一页的数据 然后更新页面 数据能改成初始状态的都要改
}
点击某个商品 跳转到详情页
为了知道是哪个商品 我们需要把当前商品的id传过去
1.详情页 获取到商品id 发送请求拿到图片 拿到对应的评论

  1. 点击图片
    调用微信提供的方法
    wx.previewImage()

做的效果 和 手机自带的功能有关系 那么一般小程序都自己封装了

vue接口
http://vue.studyit.io/api/getlunbo

原文地址:http://blog.51cto.com/13517854/2062549

时间: 2024-10-01 04:23:52

小程序第二天的相关文章

我的微信小程序第二篇

在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不太关注这些,所谓的隔行如隔山,所以,我今天简单介绍下什么是微信小程序? 据说在微信产品经理张小龙的微信朋友圈中介绍到(敲黑板,重点是“据说”噢,因为我没有张小龙微信,哈哈): 小程序是一种不用下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜索一下即可打开,也体现了“用完即走”的理念,用

三周学会小程序第二讲:客户端代码准备和基础功能讲解

通过上一讲大家已经申请了小程序了,这一讲我们主要讲解三部分,小程序开发工具使用,客户端代码准备,和基础的客户端讲解,并且运行第一预览版本. 本文不会带你从零搭建一个小程序,而是直接提供一个可预览版本.总结小编自己的编程经历,如果让你从基本类型,控制语句,for循环开始学 JAVA,那么可能几个月以后你才能真正动手做项目,所以我们按照"拿来主义",直接拿来就读,读懂就改,改完就上线.不过你不用担心这样学习的不彻底,因为开发过程中你已经融会贯通了. 代码准备 想必大家都用过Github吧,

“好饭”小程序第二冲刺阶段

第一天 昨天做了什么:做二维码. 今天准备做什么:软件大体的运行. 遇到的困难:有的功能模块不能正常使用. 第二天 昨天做了什么:软件大体的运行. 今天准备做什么:用户订学校食堂餐界面的功能优化. 遇到的困难:现在没法获取到一个学校庞大的数据库. 第三天 昨天做了什么:用户订学校食堂餐界面的功能优化. 今天准备做什么:用户订外卖的功能优化. 遇到的困难:仍然是数据库的问题. 第四天 昨天做了什么:用户订外卖的功能优化. 今天准备做什么:美食推荐界面. 遇到的困难:美食图片滚动无法显示. 第五天

小程序,会是下一个创业风口吗

小程序,创业者们的狂躁与迷思 记得在16年的9月份,就有消息说微信推出的小程序,一时间大家对于小程序的关注就从来没有减少过.或许是经过15年移动互联网大潮之后,16年互联网一下子寂静了许多的原因,大家对于小程序给予了很高的期望.我也从那时候起开始研究小程序,并且在12月的那次内测中,我也如愿的尝试了一把小程序的开发. 说实话,当时看着小程序的开发文档,惊艳了一下,呀,项目结构如此清晰,逻辑也是相当的清楚,一时间对微信平台架构的大神们膜拜了一下.相比原生的Android.ios开发,确实方便了不少

微信小程序之豆瓣电影

此文是学习小程序第二天做出的一个小demo,调用了豆瓣电影的api,但是需要填上自己appId,现在项目的 目录如下图: 在这个demo里面,我更改了小程序的navigationBar,设置了最下方的三个tabBar,这是公共的设置需要在app.json里面设置, 1 { 2 3 "pages": [ 4 "pages/index/index", 5 "pages/logs/logs", 6 "pages/query/index&quo

初学微信小程序开发—文件解析错误的解决办法

今天是我学习小程序第二天,当我正在调试新增页面时,发现这个错误: 提示为:文件解析错误  SyntaxError: Unexpected end of JSON input 一开始以为我用错标点符号之类的错误,后来百度发现,是因为这里面空的 解决办法非常简单,看图中步骤:找到即将跳转的路径,然后在左侧找到对应的文件(以本案例为例,找到weekly.json) 补上一个大括号就行了,也就是即将跳转的.json文件不能为空 第一次写博客,很新奇 原文地址:https://www.cnblogs.co

小程序的一点实践

经过测试,闹心律师小程序第二期也即将上线了,而闹心对于小程序有怎么样的开发实践呢? 小程序在千呼万唤出来之后,带来了大量的开发的吐槽,但尽管我们再怎么嫌弃小程序语法,我们也无法否认微信给小程序所带来的流量以及收益,也必须看重小程序,也不得不去学习小程序 那么我们开发小程序应该怎么去开发呢,熟悉前端的我们开发起有小程序有什么困难吗? 困难不至于,围绕小程序的官方文档甚至是可以轻松的开发,就是开发的体验的麻烦倒是不少 首先来看看小程序的架构 初始化一个默认配置的小程序项目 app.json 里面定义

精选小程序:高能预警!胆小的眯着眼划过第二个

在女孩子的眼中,一个商品降价了50,买到手就是赚到50元. 而赚到50的自己真是太棒了,必须奖励自己! 于是又花了500元. 剁手就是这样怎么剁都不够,想知道如何剁手更"有理"?看看这个小程序专题 话说回来 又是一个周末了,来看看本周有什么值得推荐的小程序吧. 1.新品有戏应用     如何让月租500的房租看起来像月租5000? 或许你需要这样一款小程序 每天推荐实用与颜值兼具的居家好物 20s的视频比马云买家秀还直观 快扔掉家里的丑东西 重新做个人吧 2.鬼姐姐鬼故事   最近天气

小程序echarts数据不改变,或者是一次渲染成功,第二次进入,渲染失败的解决办法

1.引入echarts插件: import * as echarts from '../../ec-canvas/echarts'; 2.data中定义: ecBar: { onInit: initChart }, 3.app.js中定义全局变量: globalData: { userInfo: null, all_date: [] }, 4.onload中,定义一个  all_date ,用来接收数据 5.循环出来的数据,赋值:app.globalData.all_date = all_dat