微信小程序开发常用知识点总结汇总

4月前 1,175 0

微信小程序三元运算或三目运算

<view class="set-default">
<icon class="icon" type="{{item.isDefault == true ? 'success_circle' : 'circle'}}"/>
<text>默认地址</text> 
</view>

</view>

比起wx:if和wx:else要简略的多。

设置数组或多个条目思路，经常遇到有一组按钮或条目，成数组格式，需要根据当前被点击对象，进行状态的改变，比如，有5个录音文件数组，需要根据点击当前的录音，显示播放动画，余下的4个显示静态动画，具体实现思路是，先将数组，动态绑定到前端，再在后台根据e传来的index对数组中等于index的设置为当前播放状态true，其它4个为false，另外当播放结束里，需要重置5个false，可以使用index=-1

解决微信小程序iis post put中.net core webapi put delete部署后put,delete不能正常访问显示405错误，

Web Api搭建到IIS服务器后PUT请求返回HTTP Error 405.0 - Method Not Allowed

解决方法：

第一种：

直接在添加删除功能里将WebDAV删掉，重启服务器。

第二种：修改配置文件

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="WebDAVModule" />
    </modules>
    <handlers>
      <remove name="WebDAV" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

<system.webServer>

</modules>

</handlers>

</system.webServer>

微信小程序安卓图标不显示图片不显示正常发布以后

主要原因：

图片名字里有中文，另外还有可能图片名称里有空格，建议全为英文命名好些。

关于微信小程序图片不显示的问题解决方案

经过查阅资料发现如下文档导致图片不显示：

1.本地图片是用image加载的：src="../../../images/ic_header.jpg" 这样不能显示，应改为：https://........jpg

2.图片的url里面有中文

3.图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg

4.域名未备案

微信小程序图片自适应，rich-text或新闻内容图片自适应

1、通过服务端处理img

在服务端通过正则处理新闻内容中的图片，并添加style="max-width:100%;"

2、在小程序端处理

方法一：简单办法

that.setData({
    //富文本内容
    contents: res.data.contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
})

that.setData({

//富文本内容

contents: res.data.contents.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')

})

方法二：

由于新闻内容中的图片可能带有style和width属性，这样就需要把这些都替换掉，换成自己的

3、rich-text中空格解决

在小程序中如果有空格 或单个英文空格，无论多少，只解析一个，尝试用以下办法实现：

&ensp 中文字符空格一半大小
&emsp 中文字符空格大小
&nbsp 根据字体设置的空格大小
/**utils.js

 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.img标签添加style属性：max-width:100%;height:auto
 * 3.修改所有style里的width属性为max-width:100%
 * 4.去掉<br/>标签
 * @param html
 * @returns {void|string|*}
 */
function formatRichText(html){
  let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
    return match;
  });
  newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
    return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
  return newContent;
}
 
module.exports = {
  formatRichText
}

* 处理富文本里的图片宽度自适应

* 1.去掉img标签里的style、width、height属性

* 2.img标签添加style属性：max-width:100%;height:auto

* 3.修改所有style里的width属性为max-width:100%

* 4.去掉<br/>标签

* @param html

* @returns {void|string|*}

function formatRichText(html){

let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){

match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');

match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');

match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');

return match;

});

newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){

match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');

return match;

});

newContent = newContent.replace(/<br[^>]*\/>/gi, '');

newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');

return newContent;

}

module.exports = {

formatRichText

}

使用：

that.setData({
    //富文本内容
    contents: formatRichText(res.data.contents)
})

that.setData({

//富文本内容

contents: formatRichText(res.data.contents)

})

使用wx.request同步

wx.request是异步请求，如果在其success函数里面赋值result=res.data，那么在外面result值为undefined

可以用Promise来解决，代码如下：

common.js

/**用Promise解决wx.request异步请求带来的问题
 * method:servlet的函数名,如query、insert
 * parameter:
 */
  function getAPI(method, parameter){
    return new Promise(function (resolve, reject) {
      wx.request({
        url: 'http://localhost:8989/wxAPI/' + method + '.do?' + parameter,
        //如http://localhost:8989/wxAPI/query.do?searchStr=斗破苍穹
        data: {
        },
        header: {
          'content-type': 'application/json'
        },
        success: function(res){
          resolve(res);
        },
        fail: () => {
          reject("系统异常，请重试！")
        }
      })
    })
  }
  module.exports={
    getAPI:getAPI
  }

/**用Promise解决wx.request异步请求带来的问题

* method:servlet的函数名,如query、insert

* parameter:

function getAPI(method, parameter){

return new Promise(function (resolve, reject) {

wx.request({

url: 'http://localhost:8989/wxAPI/' + method + '.do?' + parameter,

//如http://localhost:8989/wxAPI/query.do?searchStr=斗破苍穹

data: {

header: {

'content-type': 'application/json'

success: function(res){

resolve(res);

fail: () => {

reject("系统异常，请重试！")

}

})

}

module.exports={

getAPI:getAPI

}

index.js(这里只是简单测试)

var util = require('../../utils/common.js');
Page({
  data: {
  },
  onLoad: function () {
   
  },
  onShow: function () {
    util.getAPI('query', 'searchStr=斗破苍穹').then((res) => {
       console.log(res.data.items); 
    }).catch((res) => { 
      console.log(res) 
    })
  }
})

var util = require('../../utils/common.js');

Page({

data: {

onLoad: function () {

onShow: function () {

util.getAPI('query', 'searchStr=斗破苍穹').then((res) => {

console.log(res.data.items);

}).catch((res) => {

console.log(res)

})

}

})

还有更简单的办法，直接在wx.request中的success中写代码即可。但这样回调多的话，逻辑复杂，根据情况选择二者其一即可。

https://blog.csdn.net/weixin_34364071/article/details/91436647

微信小程序开发常用知识点总结汇总

微信小程序三元运算或三目运算

解决微信小程序iis post put中.net core webapi put delete部署后put,delete不能正常访问显示405错误，

Web Api搭建到IIS服务器后PUT请求返回HTTP Error 405.0 - Method Not Allowed

微信小程序安卓图标不显示图片不显示正常发布以后

关于微信小程序图片不显示的问题解决方案

微信小程序图片自适应，rich-text或新闻内容图片自适应

使用wx.request同步

发表评论

发表评论取消回复

微信小程序三元运算或三目运算

解决微信小程序iis post put中.net core webapi put delete部署后put,delete不能正常访问显示405错误，

Web Api搭建到IIS服务器后PUT请求返回HTTP Error 405.0 - Method Not Allowed

微信小程序 安卓 图标不显示 图片不显示 正常发布以后

关于微信小程序图片不显示的问题解决方案

微信小程序图片自适应，rich-text或新闻内容图片自适应

使用wx.request同步

猜你喜欢

发表评论

发表评论 取消回复

微信小程序安卓图标不显示图片不显示正常发布以后

发表评论取消回复