likes
comments
collection
share

小程序开发常见问题与解决方案

作者站长头像
站长
· 阅读数 52

全局样式设置

/*app.wxss*/
/*引入WeUI组件库https://developers.weixin.qq.com/miniprogram/dev/extended/weui/  */ 
@import './weui/weui.wxss'; 


view{   box-sizing: border-box;   line-height: 1;   font-family: PingFang-SC-Medium; font-weight: SC-Medium; } 

.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; font-size: 13px; color: #353535; overflow: hidden; }

/*设置全局背景色 */ 
/*如果某个页面需要其他背景色，可单独在页面css设置page的背景色 */ 
/*有tabbar的页面page底部需要加边距，避免被tabbar覆盖，ios兼容问题，只能加padding-bottom,不能用margin */
page { max-width: 100%; background: #f8f8f8; } 


/*表单默认*/ 
.placeholder { color:#B2B2B2; font-size: 12px; } 

/*fix:bug某些特殊情况ios下textare文本高度不能修改，需要写死高度加!important提高优先级*/ 
wx-textarea { height: 200rpx!important; }

/*textarea自动高度属性在ios机子失效，需要给固定高度，超过滚动 */  
.textarea{ min-height: 118rpx; width: auto; height: auto; font-size: 30rpx; text-align: left; overflow: auto; } 

/*1px边框问题，上下边框 */ 
.line::after { content: ''; display: block; height: 1px; transform: scaleY(0.5); background: #ddd; position: relative; top: 0rpx; // top根据原素设置的padding值设置 }

图片

1、图片宽高必须自定义，可以加mode让图片自适应，如背景图高度自适应 mode="widthFit"，头像自适应 mode="aspectFit"；

2、背景图片地址不能用本地，如果整个项目图片文件太多，可选择放服务器，在全局定义图片路径变量，页面中引入

/*app.js */
globalData: { imageUrlPath: 'https://files.exingtech.com/mobile/images', }, 
/*index.js */
var app = getApp(); 
imageUrlPath: app.globalData.imageUrlPath,

app.json配置

{  
    "pages":  [
        "pages/index/index",
        "pages/mine/mine",
        "pages/login/login"
     ],
     "window":  {    
        "backgroundTextStyle":   "light",
        "navigationBarBackgroundColor":   "#fff",
        "navigationBarTitleText":   "小程序标题",
        "navigationBarTextStyle":   "black"  
    },
    "tabBar":  {    
        "color":   "#a3a3a3",
        "selectedColor":   "#000000",
        "borderStyle":   "black",
        "list":  [
            {        
                "text":   "发现",
                "pagePath":   "pages/news/news",
                "iconPath":   "images/tabs/read.png",
                "selectedIconPath":   "images/tabs/read_active.png"      
            },
            {        
                "text":   "我的",
                "pagePath":   "pages/mine/mine",
                "iconPath":   "images/tabs/my.png",
                "selectedIconPath":   "images/tabs/my_active.png"      
            }   
        ]
    },
     "style":   "v2",
     "sitemapLocation":   "sitemap.json",
     "useExtendedLib":  {    
        "weui":  true  
    }
}

tabbar自定义

1、设置app.json的tabbar内容

"tabBar": { 
  "custom": true, 
  "color": "#999", 
  "backgroundColor": "#fff", 
  "selectedColor": "#09BB07",
  "borderStyle": "black",
  "list": []
}

2、用cover-view包住，里面嵌套cover-text、cover-image，保证层级最高

3、js判断点击第几个菜单，实现调用某个组件（比如做底部弹窗效果），Component构造器的selectComponent方法this.selectComponent("#addMeasure").init()

4、自定义tabbar组件设计戳这里

自定义头部导航

index.json

// 设置标题、字体颜色，背景颜色 
"navigationBarBackgroundColor": "#00BA6B", 
"navigationBarTitleText": "我的小程序", 
"navigationBarTextStyle": "white", 
// 启用自定义 
"navigationStyle": "custom" 
//自定义需要配合计算，否则跟右边的胶囊按钮不对齐，iphonex显示也会有问题

index.js

Page({ 
data: { CustomBar: 0, StatusBar: 0, }, 
onLoad(params) { 
    this.getSystemInfo()
}, 
//自定义标题获取高度 
getSystemInfo(){ 
  wx.getSystemInfo({ success: res => { 
    app.globalData.StatusBar = res.statusBarHeight; 
    // 状态栏高度 
    let custom = wx.getMenuButtonBoundingClientRect(); 
    //  胶囊信息 
    app.globalData.Custom = custom; 
    app.globalData.CustomBar = custom.bottom + custom.top - res.statusBarHeight; 
    //  导航栏高度 
    this.setData({ 
        CustomBar: app.globalData.CustomBar, 
        StatusBar: app.globalData.StatusBar
    })
 })
}

index.wxml

<view class="nav-bar" style="height: {{CustomBar}}px">
    <view class='operation-bar' style='</em>height:{{CustomBar}}px;padding-top:{{StatusBar}}px;'> 
        <image bindtap="goback" style='top:{{StatusBar}}px;' class="icon-goback" src="{{imageUrlPath}}/home/goback_w.png"></image> 
    我的资料
    </view>
</view>

index.wxss

.nav-bar { width: 100%; height: 80rpx; position: absolute; top: 0; z-index: 2; display: flex; align-items: center; flex-direction: row; justify-content: center; color:#fff; font-size: 33rpx; font-weight: bold; text-align: center; background: none; } 
.operation-bar { position: relative; width: 100%; }
.icon-goback{ position: absolute; top: 0; left: 0; width: 36rpx; height: 36rpx; padding: 10rpx 30rpx; }

引入canvas图表组件

1、echarts官网按需选择需要的组件下载，上传代码需要使用压缩版js,去掉名字的min即可；

2、引入echarts的页面，父级元素避免使用定位，否则滚动页面时，ec也会无法滚动；

3、引入echarts的页面，自定义picker组件无法覆盖到ec上面，用原生picker组件即可；

4、如果如要在echarts页面使用自定义弹窗，在弹窗时wx:if={{}}隐藏ec,关闭时再显示也可以避免canvas层级穿透问题。

rich-tex富文本

1、让图片自适应屏幕宽度；

let data = res.data.content 
if (data) { 
  let article = ''; 
  /** * 此代码段处理目的为，匹配富文本代码中的 <img> 标签，并将其图片的宽度修改为适应屏幕 * max-width:100% --- 图片宽度加以限制，避免超出屏幕 * height:auto --- 高度自适应 * display:block --- 此代码，可以去掉图片之间的空白间隔 */

  article.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ').replace(/<section/g, '<div').replace(/\/section>/g, '\div>'); 
article = data.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p') .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p') 
.replace(/<p>/ig, '<p class="p_class">') .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1') .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 class="pho"') 

  this.setData({ content: article })
} 

rich-text { font-size: 28rpx; color: #353535; letter-spacing: 1rpx; } .p_class { line-height: 46rpx; text-indent: 60rpx; margin-bottom: 20rpx; } .pho { margin: 0 auto; display: block; max-width: 100%; height: auto; }

小程序跳转

1、跳转H5页面

<web-view src="https://www.baidu.com"></web-view>

2、跳转页面左上角显示小房子

跳转页面非tabbar页面，非首页

wx.redirectTo({ url: 'test?id=1' })
转载自:https://juejin.cn/post/7225803154552832057
评论
请登录