微信小程序项目实战
微信小程序之设置背景图片不显示问题：
微信小程序开发设置的背景图片不显示，这是由于：background-image 只能用网络url或者base64图片编码 ，本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。
那么本地图片如何显示呢？由于我有很多页面都需要背景图便封装了公共方法。
微信小程序根目录 -> utils文件夹 -> utils.js
function imgToBase(img){ let base64 = wx.getFileSystemManager().readFileSync(img, 'base64'); var imgUrl = 'data:image/jpg;base64,' + base64; return imgUrl;}module.exports = { imgToBase: imgToBase}具体使用：
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) }); },})<view class="bgTop" style="background:url({{background}}) center no-repeat;background-size: 100% 100%;"></view>scroll-view横向滚动的时候，元素没有对齐。scroll-view横向滚动的时候，包含文字图片等，元素错位，第二个元素掉下去；
给 scroll-view 子元素添加：
vertical-align:top;补充：scroll-view 的使用（微信小程序的横向及纵向滑动）：
<!--垂直滚动，这里必须设置高度--><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：
@import "../../wxParse/wxParse.wxss";- 在要使用的小程序页面对应的js文件中引用wxParse.js，并使用：
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
<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 .
<input type="text" bindblur='no_focus' bindfocus="focus" />// 获取到焦点 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事件获取到输入框的高度，然后再给输入框绝对定位，距离底部的高度登录获取到的高度。
<input style='position: absolute; bottom:{{input_bottom}}px' type="text" adjust-position='{{false}}' bindfocus="focus" /> 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 调整键盘与输入框的距离。
<input type="text" cursor-spacing='5' />原文链接「微信小程序input详解」 ：https://blog.csdn.net/qq_35713752/article/details/81104629
微信小程序自定义组件的使用、子父组件传值以及调用自定义组件中的方法。
- 自定义组件及其使用方法。
小程序根目录下新建文件夹 components 放置自定义组件，如自定义组件名字为 myComponent，myComponent.wxml文件代码为：
<view class="inner">hello！</view>myComponent.js 文件代码为：
const app = getApp()Component({ properties: {
}, data: { // 这里是一些组件内部数据 someData: {} }, methods: { customMethod(){ console.log('hello world! I am learning 微信小程序') } }})在 myComponent.json 的代码：
{ "component": true}使用：在需要调用自定义组件的文件中，如pages/index文件需要调用自定义组件，那么则需要在pages/index/index.json文件中添加如下代码：
{ "usingComponents": { "myComponent": "../../components/myComponent/myComponent" // 组件名以及组件所在路径 }}index.wxml文件代码如下：
<view> <myComponent id="myComponent"></myComponent></view>调用子组件的方法，index.wxml文件代码变为：
<view> <button bindtap="showComponent">组件调用</button> <myComponent id="myComponent"></myComponent></view>index.js文件部分代码为：
Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 页面初次渲染完成后，使用选择器选择组件实例节点，返回匹配到组件实例对象 this.myComponent = this.selectComponent('#myComponent') }, showComponent: function () { let myComponent = this.myComponent myComponent.customMethod() // 调用自定义组件中的方法 }})父子组件传递数据的方法
- 父组件向子组件传递数据
parent.wxml：
<myComponent name="{{name}}" age="{{age}}"></myComponent>parent.js ：
data: { name: 'Peggy', age: 25}child.js：
properties: { name: { type: String, value: '小明' }, age: Number}父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name获取。
- 子组件向父组件传值
child.js：
methods: { changeName() { this.triggerEvent('changeName', { name: '李四' }) }}parent.wxml：
<myComponent name="{{name}}" age="{{age}}" bindchangeName="changeName"></myComponent>parent.js:
changeName(event) { console.log(event.detail) // { name: '李四' }}子组件向父组件传递数据使用this.triggerEvent方法，这个方法接受3个参数：this.triggerEvent('myevent', myEventDetail, myEventOption);
myevent为方法名， myEventDetail是传到组件外的数据， myEventOption为是否冒泡的选项，有三个参数可以设置：
bubbles 默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段在父组件监听事件bindchangeName="changeName"，在changeName方法里有一个event参数，可以从event.detail里拿到组件内部传出来的值。
参考文章「 微信小程序：自定义组件的数据传递 」：https://segmentfault.com/a/1190000014474289
腾讯云开发者
