前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序项目实战

微信小程序项目实战

作者头像
生南星
发布2020-04-26 21:59:48
2K0
发布2020-04-26 21:59:48
举报
文章被收录于专栏:生南星

微信小程序之设置背景图片不显示问题:

微信小程序开发设置的背景图片不显示,这是由于:background-image 只能用网络url或者base64图片编码 ,本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。

那么本地图片如何显示呢?由于我有很多页面都需要背景图便封装了公共方法。

微信小程序根目录 -> utils文件夹 -> utils.js

代码语言:javascript
复制
function imgToBase(img){    let base64 = wx.getFileSystemManager().readFileSync(img, 'base64');    var imgUrl = 'data:image/jpg;base64,' + base64;    return imgUrl;}module.exports = {  imgToBase: imgToBase}

具体使用:

代码语言:javascript
复制
import { imgToBase } from '../../utils/util';Page({  data: {    background1 : "pages/image/index1.png"  //背景图片  },  onLoad: function () {    //图片转base64    var that = this;    that.setData({      'background': imgToBase(this.data.background)    });  },})
代码语言:javascript
复制
<view class="bgTop" style="background:url({{background}}) center no-repeat;background-size: 100% 100%;"></view>

scroll-view横向滚动的时候,元素没有对齐。scroll-view横向滚动的时候,包含文字图片等,元素错位,第二个元素掉下去;

给 scroll-view 子元素添加:

代码语言:javascript
复制
vertical-align:top;

补充:scroll-view 的使用(微信小程序的横向及纵向滑动):

代码语言:javascript
复制
<!--垂直滚动,这里必须设置高度--><scroll-view scroll-y="true" style="height: 200px">    <view style="background: red; width: 100px; height: 100px" ></view>    <view style="background: green; width: 100px; height: 100px"></view>    <view style="background: blue; width: 100px; height: 100px"></view>    <view style="background: yellow; width: 100px; height: 100px"></view></scroll-view>
<!--  white-space  normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)  pre: 保持HTML源代码的空格与换行,等同与pre标签  nowrap: 强制文本在一行,除非遇到br换行标签  pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行  pre-line: 同pre属性,但是遇到连续空格会被看作一个空格  inherit: 继承--><!--水平滚动--><scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" ><!--  display: inline-block-->  <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>  <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>  <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>  <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view></scroll-view>

参考「 微信小程序----------踩坑记录---安卓iOS兼容等 」:https://blog.csdn.net/huihui_jiang/article/details/86742070

小程序使用wxParse解析html,wxParse的基础用法。

小程序在开发时,读取到服务器的内容如果是html格式的,因小程序不支持html格式的内容显示的,因此要对html格式的内容进行编译,可以通过wxParse来实现。

  • 下载地址:https://github.com/icindy/wxParse。将下载下来的wxParse文件夹复制到开发项目的根目录下。
  • 在要使用的小程序页面对应的wxss文件中引用 wxParse.wxss:
代码语言:javascript
复制
@import "../../wxParse/wxParse.wxss";
  • 在要使用的小程序页面对应的js文件中引用wxParse.js,并使用:
代码语言:javascript
复制
var WxParse = require('../../wxParse/wxParse.js');
Page({  data: {
  },  onLoad: function () {    const that = this;    var article = "<p>避免用不干净的手去碰手术伤口,以免引起细菌感染;术后姿势要注意,睡觉时枕高头部,有助于消肿。</p>" +      "<p><font color=\"#e8714f\"><br /></font></p>" +      "<p>上眼皮,下眼皮,眼球的视觉系统是三个相对独立的解剖生理结构和部位,所以手术是不会对视力产生影响的。</p>"
    /**    * WxParse.wxParse(bindName , type, data, target,imagePadding)    * 1.bindName绑定的数据名(必填)    * 2.type可以为html或者md(必填)    * 3.data为传入的具体数据(必填)    * 4.target为Page对象,一般为this(必填)    * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)    */
    WxParse.wxParse('article', 'html', article, that, 5);  }})
  • 在要使用的小程序页面对应的wxml文件中引用 wxParse.wxml
代码语言:javascript
复制
<import src="../../wxParse/wxParse.wxml"/> <view class="wxParse">    <template is="wxParse" data="{{wxParseData:article.nodes}}"/></view>

原文链接:https://www.jianshu.com/p/d937c558efe2

微信小程序input相关。

  • 写输入框的时候,想实时获取输入框的焦点。需要的两个事件如下:

bindfocus

EventHandle

输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持

bindblur

EventHandle

输入框失去焦点时触发,event.detail = {value: value}

解决方法:在input写上面的两个事件,然后setData .

代码语言:javascript
复制
<input type="text" bindblur='no_focus' bindfocus="focus" />
代码语言:javascript
复制
// 获取到焦点  focus:function(e){    var that = this;    console.log(e.detail.height)    this.setData({      focus: true,      input_bottom: e.detail.height    })  },  // 失去焦点  no_focus: function (e) {      this.setData({        focus: false      })  },
  • 用户在使用输入框时手机输入法的键盘会往上划动,导致页面错乱或者闪屏。用到的事件和属性:

adjust-position

Boolean

true

键盘弹起时,是否自动上推页面

bindfocus

EventHandle

输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持

解决方案:组件键盘自动上推,然后获取手机键盘的高度,使用定位解决。

解决方法:给 input 添加 bindfocus 事件并添加 adjust-position='{{false}}' 属性, 通过bindfocus事件获取到输入框的高度,然后再给输入框绝对定位,距离底部的高度登录获取到的高度。

代码语言:javascript
复制
 <input style='position: absolute; bottom:{{input_bottom}}px' type="text" adjust-position='{{false}}' bindfocus="focus" />
代码语言:javascript
复制
 focus:function(e){    console.log(e.detail.height)    this.setData({      focus: true,      input_bottom: e.detail.height    })  },
  • 用户在使用键盘时,键盘顶部将输入框底部的边框遮挡了,导致下边框消失。用到的事件和属性:

cursor-spacing

Number

0

指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

解决方法:通过 cursor-spacing 调整键盘与输入框的距离。

代码语言:javascript
复制
 <input type="text" cursor-spacing='5' />

原文链接「微信小程序input详解」 :https://blog.csdn.net/qq_35713752/article/details/81104629

微信小程序自定义组件的使用、子父组件传值以及调用自定义组件中的方法。

  • 自定义组件及其使用方法。

小程序根目录下新建文件夹 components 放置自定义组件,如自定义组件名字为 myComponent,myComponent.wxml文件代码为:

代码语言:javascript
复制
<view class="inner">hello!</view>

myComponent.js 文件代码为:

代码语言:javascript
复制
const app = getApp()Component({  properties: {
  },  data: {    // 这里是一些组件内部数据    someData: {}  },  methods: {    customMethod(){      console.log('hello world! I am learning 微信小程序')    }  }})

在 myComponent.json 的代码:

代码语言:javascript
复制
{  "component": true}

使用:在需要调用自定义组件的文件中,如pages/index文件需要调用自定义组件,那么则需要在pages/index/index.json文件中添加如下代码:

代码语言:javascript
复制
{  "usingComponents": {    "myComponent": "../../components/myComponent/myComponent"   // 组件名以及组件所在路径  }}

index.wxml文件代码如下:

代码语言:javascript
复制
<view>    <myComponent id="myComponent"></myComponent></view>

调用子组件的方法,index.wxml文件代码变为:

代码语言:javascript
复制
<view>    <button bindtap="showComponent">组件调用</button>    <myComponent id="myComponent"></myComponent></view>

index.js文件部分代码为:

代码语言:javascript
复制
Page({  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {    //  页面初次渲染完成后,使用选择器选择组件实例节点,返回匹配到组件实例对象      this.myComponent = this.selectComponent('#myComponent')  },   showComponent: function () {      let myComponent = this.myComponent      myComponent.customMethod()  // 调用自定义组件中的方法   }})

父子组件传递数据的方法

  • 父组件向子组件传递数据

parent.wxml:

代码语言:javascript
复制
<myComponent name="{{name}}" age="{{age}}"></myComponent>

parent.js :

代码语言:javascript
复制
data: {  name: 'Peggy',  age: 25}

child.js:

代码语言:javascript
复制
properties: {  name: {    type: String,    value: '小明'  },  age: Number}

父组件向子组件传值以属性的形式,子组件以properties接收,并可指定数据类型type以及默认值value。在wxml里可直接以{{name}}的形式使用,而在js中以this.properties.name获取。

  • 子组件向父组件传值

child.js:

代码语言:javascript
复制
methods: {  changeName() {    this.triggerEvent('changeName', {      name: '李四'    })  }}

parent.wxml:

代码语言:javascript
复制
<myComponent name="{{name}}" age="{{age}}" bindchangeName="changeName"></myComponent>

parent.js:

代码语言:javascript
复制
changeName(event) {  console.log(event.detail)  // { name: '李四' }}

子组件向父组件传递数据使用this.triggerEvent方法,这个方法接受3个参数:this.triggerEvent('myevent', myEventDetail, myEventOption);

myevent为方法名, myEventDetail是传到组件外的数据, myEventOption为是否冒泡的选项,有三个参数可以设置:

代码语言:javascript
复制
bubbles    默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

在父组件监听事件bindchangeName="changeName",在changeName方法里有一个event参数,可以从event.detail里拿到组件内部传出来的值。

参考文章「 微信小程序:自定义组件的数据传递 」:https://segmentfault.com/a/1190000014474289

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 生南星 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 父子组件传递数据的方法
    • parent.wxml:
    相关产品与服务
    云开发 CloudBase
    云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档