微信小程序
微信小程序
肉丸不肉
这个作者很懒,什么都没留下…
展开
-
从头开发一个微信小程序(会不断补充完善,直至毕设做完)
“从头”指的是:已经建立好初始项目零、初始框架结构建立images目录放此小程序用到的所有图片在pages下建立开发过程成用到的所有页面一、建立底部导航栏在app.json中导航栏代码为:tabBar那块我的小程序tabBar有四个为:首页、全部分类、购物车、我的不移过多,3个或4个布局最顺眼。"pagePath":此导航对应的页面,需要自己新创建,page...原创 2020-03-18 00:46:10 · 568 阅读 · 1 评论 -
天气预报源码
index.html<view class='container'> <!-- 添加背景图片 --> <image src='{{backImg}}' class='bgi' mode='aspectFill'></image> <!-- 所有的内容 --> &原创 2018-07-17 19:57:25 · 2131 阅读 · 0 评论 -
案例四——电影展示
1、 新建目录 在目录下新建 page这样比较快,而且在app.json中会自动更新路径2、原创 2018-07-18 09:55:08 · 440 阅读 · 0 评论 -
接口API
1、和风天气:给城市名称给出天气+质量状况+未来天气预测2、腾讯地图:给经纬度返回城市名称3、豆瓣4、原创 2018-07-18 14:24:55 · 774 阅读 · 0 评论 -
带参数页面之间进行跳转+对应页面显示
待要跳转页面 console.log(city, "获取到的城市名字2") wx.navigateTo({ url: `../shop/shop?cityName=${city}`, }) 变量需要${}来传,且url的符号变为`目标页面onLoad: function (options) { con...原创 2018-07-18 15:31:34 · 1244 阅读 · 0 评论 -
页面跳转传多个参数
1、一般只会传一个id,比如从列表页跳到详情页,只传一个productId。 进入详情页后,再通过productId请求接口拿详情页的数据。2、用wx.setStorage等API做全局缓存...原创 2018-07-26 14:31:18 · 2915 阅读 · 0 评论 -
背景图片占全屏幕高度
index.wxml <view class="first"> <image src="bm_bg.jpg" class="bg-image" mode="scaleTofill"></image> &原创 2018-07-30 21:42:18 · 595 阅读 · 0 评论 -
分页更新数据
1、 .jsvar app = getApp()Page({ data: { itemData:[], nextUrl:null, //标记下一页是否还有 flag:0, //提示内容没有的信息是否显示 info: false }, getfriends:function(){ var that = this wx...原创 2018-07-27 16:17:47 · 1872 阅读 · 0 评论 -
CSS规定宽度 文字超出显示省略号
width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;http://caibaojian.com/css-white-space.html原创 2018-07-27 17:51:43 · 465 阅读 · 0 评论 -
微信小程序下拉选择框—相当于网页的select
index.html<view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='s...原创 2018-08-02 14:50:00 · 7997 阅读 · 2 评论 -
微信小程序——button添加背景图片
<button class="weui-btn" form-type='submit' plain='true'> <image src='../../images/bm_btn.png' mode='widthFix'></image></button> button设为透明:plain=’true’ button的padding设...原创 2018-08-02 14:51:44 · 35241 阅读 · 13 评论 -
zanui的使用
1、下载后的项目根目录: 2、 把dist目录放在项目的根目录下,并把zanui实例中的componets放在根目录下 3、 在app.wxss中引入index.wxss样式 4、 .wxml 去实例中找样式,复制适当的进行改变<doc-page title="CAPSULE" without-padding> <zan-panel witho...原创 2018-08-16 11:45:13 · 1500 阅读 · 0 评论 -
微信小程序表单提交验证手机号问题
index.jsformSubmit: function(e) { var that = this var areaid = that.data.index // console.log(that.data.index,'用户选择的区域下标') // console.log(that.data.selectData,'所有区域') var mobile ...原创 2018-09-05 15:52:12 · 3254 阅读 · 0 评论 -
小程序注意事项
hidden 只能用在text上,不能用在view等块级元素上.js里面必须有page,初始化界面。事件属性里面 target和ccurrenttarget区别:第一个是触发的源头,第二个是当前触发的(对于冒泡事件来说的)重点看控制台!px全换为rpx!!!自动适配!不过需要注意,比如你想要200px,应该是400rpx。rpx会将px大约缩小一半!link引入css文件...原创 2018-10-07 15:46:25 · 264 阅读 · 0 评论 -
案例三——天气预报
1、 加背景图,小程序不可以background-image,这样只能加网络图片应该:2、 绝对定位3、 弹性布局居中4、 字体透明度5、原创 2018-07-17 11:41:37 · 524 阅读 · 0 评论 -
案例二——二维码
疑问点:1、监听input输入框内容:bindKeyInput:function(e){ var that = this; console.log(e.detail.value,"输入框内容") that.setData({ //监听输入框事件 qrtext: e.detail.value }) }, 如果不知道内容是...原创 2018-07-17 10:38:27 · 226 阅读 · 0 评论 -
生成二维码
index.wxml<view class='box'> <canvas canvas-id='qrcode' style='margin:auto;height:660rpx;width:660rpx;background:#AAA'></canvas> <view> <input bindinput="bindKeyI...原创 2018-07-17 10:28:26 · 294 阅读 · 0 评论 -
小程序WXML(weixin Markup Language)
模板:拥有独立作用域2.原创 2018-03-23 23:39:42 · 1922 阅读 · 0 评论 -
事件
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 注意看控制台!点击inner事件,middle和outter事件同样会被触发!非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。 将middle中的bindtap变为catchtap! 看控制台的区别!各种事件的分类,多试试!.wxml<view id="outter" bi...原创 2018-03-24 00:12:03 · 220 阅读 · 0 评论 -
小程序—view组件—flex布局
html里面的div在小程序里面用view代替。 用flex布局。.wxml:<view class='flex-wrap'> <view class='a'>a</view> <view class='b'>b</view> <view class='c'>c</view>&am原创 2018-03-24 16:51:26 · 2023 阅读 · 0 评论 -
tabbar实现
index.wxml<view class="tab"> <view class="nav"> <view class="{{selected0?'red':'default'}}" bindtap="selected0">附近报警地点</view> <view原创 2018-04-17 22:14:35 · 463 阅读 · 0 评论 -
微信小程序: 导航栏样式、tabBar导航栏
在 app.json中: "tabBar": { "selectedColor": "#1296db", "list": [ { "pagePath": "pages/before/before_first", "text": "社区", "iconPath转载 2018-04-17 20:42:08 · 1933 阅读 · 0 评论 -
小程序载入出现问题
出现问题报错:找不到对应的app.json可能的原因: 1、路径中不能一个文件夹包含另一个文件夹 2、删掉此项目,重新建一个原创 2018-04-14 21:10:32 · 766 阅读 · 0 评论 -
微信小程序——三级联动
index.wxml&lt;form bindsubmit="formSubmit"&gt; &lt;view class='biaodan'&gt; &lt;view class="weui-cells weui-cells_after-title single"&gt; &lt;原创 2018-05-26 15:22:37 · 5403 阅读 · 2 评论 -
小程序页面跳转
.wxmlbindtap=”函数名”<span style="font-size:14px;"> <view bindtap="aa" class="usermotto"> <text class="user-motto">bbb</text> </view>转载 2018-05-28 21:41:42 · 394 阅读 · 0 评论 -
微信小程序image图片自适应宽度比例显示的方法
参考文章: https://blog.csdn.net/gao_xu_520/article/details/71215386 使用mode:widthFix widthFix:宽度不变,高度自动变化,保持原图宽高比不变。 首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。 这样图片也可以自适应了。。因为小程序的rpx本身就是...转载 2018-05-29 00:34:21 · 13567 阅读 · 1 评论 -
flex布局
display: flex; justify-content: space-around;解释: 1、justify-content属性:定义项目在主轴上的对齐方式。 2、space-around:每个项目两侧的间隔相等,即项目之间的间隔比项目与边框的间隔大一倍。 justify-content: space-around;3、align-items: center; 在...原创 2018-07-16 14:16:27 · 134 阅读 · 0 评论 -
遇到的坑或者好用但不习惯用的方法
1、对页面json文件进行配置的时候只可以配置设置默认页面的窗口表现(即只能对window进行配置),但是在此时可以直接省略window,如果加window则没有效果,也不会报错。 以下是一个包含了window配置选项的简单配置,post.json :错误写法:{ "window":{ "navigationBarBackgroundColor": "#ffffff", ..原创 2018-07-16 14:35:09 · 136 阅读 · 0 评论 -
案例一——猜拳游戏
主要是关于index.js页面中的疑问点:1、 setInterval({所执行的函数}, 时间间隔)//开始按钮的函数 start: function(){ var that = this; //间断 //timer = setInterval({函数},时间间隔); timer = setInterval(function(){ /...原创 2018-07-16 18:56:40 · 938 阅读 · 0 评论 -
猜拳游戏源代码
index.wxml<!--index.wxml--><view class='game'> <text class='info'>你已经获胜了</text> <text class='wintimestyle'>{{wintimes}}</text> <text class='info'&g原创 2018-07-16 19:03:40 · 3124 阅读 · 0 评论 -
tabbar不显示
搞了好久tabbar都不显示…去看了各种可能的原因,虽然最后发现我不是这些原因,但是写一下他们的原因吧( ̄▽ ̄)~*pages中的第一个页面,没有出现在tabBar配置项(list数组)中。好了,所以我出现的原因就是!!tabbar 写成了tarbar。。。。ヾ(◍°∇°◍)ノ゙无语了。。。不够我要默默的吐槽一下微信开发程序!为什么没有自动检索错误的!!!...原创 2018-03-23 16:58:51 · 1650 阅读 · 0 评论