小程序如何动态设计响应式数据

小程序动态设计响应式数据方法如下：

1、先制作好PSD模板，不要直接在Muse当中完成视觉设计。

2、处理好PHOTOSHOPD文件中智能对象的关系以及图层顺序的关系。

3、微信小程序页面微信小程序内容与背景图片的关系一定要分开。北京微信小程序设计最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。先做好一个断点的布局，然后先做最大的宽度适配。

4、做好第一个和最大的适配后，开始调整微信小程序页面元素的对齐参考点。

5、开始适配768px平板宽度和375px手机宽度的布局。

6、观察微信小程序内容是否超出当前断点的编辑(Editor)区域。北京微信小程序制作公司是策划师、网络程序员、北京微信小程序设计等岗位，应用各种网络程序开发技术和北京微信小程序设计技术，为企事业单位、公司或个人在全球互联网上建设微信小程序，并包含域名注册和主机托管等服务的总称。

7、最后检查不断断点缩放的过程中，图片的缩放规则是否恰当，即可完成小程序动态设计响应式数据。

一、wx.setNavigationBarTitle

1.设置整个小程序通用标题，在app.json里设置：

"window": {

"navigationBarTitleText": "默认标题"

}

复制

2.单独设置页面标题，在对应页面json文件里设置（子页面设置会覆盖通用设置）：

{

"navigationBarTitleText": "首页"

}

复制

3.动态设置，比如说：我们从接口拿到商品名称后，把商品名称设置到标题上

wx.request({

url: "请求接口url",

method: "POST",

data: {},

success: function (res) {

if (res.data.code == 200) {

// 修改navigationBarTitleText

wx.setNavigationBarTitle({

title: goods_name

})

}

}

})

复制

tips：动态设置 >页面独立设置 >通用设置

效果图：

当然，另外我们可以通过点击事件来动态设置标题：

test: function () {

wx.setNavigationBarTitle({

title: "我是点击后的标题"

})

}

复制

效果图：

二、wx.setNavigationBarColor

设置页面导航条颜色

wx.setNavigationBarColor({

frontColor: '#ffffff',

backgroundColor: '#ff0000',

animation: {

duration: 400,

timingFunc: 'easeIn'

}

})

复制

frontColor：前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000

backgroundColor：背景颜色值，有效值为十六进制颜色

animation：动画效果

①animation的结构包括：duration，timingFunc；

②timingFunc：linear（动画从头到尾的速度是相同的），easeIn（动画以低速开始），easeOut（动画以低速结束），easeInOut（动画以低速开始和结束）

效果图：

三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading

wx.showNavigationBarLoading：在当前页面显示导航条加载动画

wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

index.wxml

<button bindtap="showLoading">显示加载动画</button>

<button bindtap="hideLoading">隐藏加载动画</button>

复制

index.js

// 显示加载动画

showLoading: function () {

wx.showNavigationBarLoading()

},

// 隐藏加载动画

hideLoading: function () {

wx.hideNavigationBarLoading()

}

复制

效果图：

四、wx.hideHomeButton

隐藏返回首页按钮。微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

点击【关注】—右上角【发动态】

店铺动态简单说是微店上的“朋友圈”，收藏你店铺的人平时都会在微店app“关注”频道浏览你的动态，发动态相当于在微店上发“朋友圈”。发动态可以及时高效地触达客户，提升收藏者的下单数，并且可以获得微店app的免费流量。发布成功后可在微店买家版app—【关注】中展示，关注了本店铺的买家可查看到商家发布的动态，动态支持点赞、评论、转发。点击转发可以分享至微信好友、朋友圈、qq好友、qq空间、微博等。

入口一：登录微店买家版app，点击【关注】—右上角【发动态】，可发布图片动态、视频动态、店长笔记、店铺活动。视频动态支持上传视频、拍摄视频和第三方视频。发布成功后可在微店买家版app—【关注】中展示，关注了本店铺的买家可查看到商家发布的动态，动态支持点赞、评论、转发。点击转发可以分享至微信好友、朋友圈、qq好友、qq空间、微博等。

入口二：登录微店店长版app，点击【店铺管理】—【发布】—【发店铺动态】，可发布图片动态。

发布成功后可在微店买家版app—【关注】中展示，关注了本店铺的买家可查看到商家发布的动态，动态支持点赞、评论、转发。点击转发可以分享至微信好友、朋友圈、qq好友、qq空间、微博等。

---