为了提高用户在浏览商品时的体验,在这里总结

作者: 前端  发布:2019-11-20

label

与html一致,用以点击文字操作控件,主要用于文本框

现有的基于微信平台的电商公众号大多采用内容+店铺的方式发布商品,店铺大多是接入有赞、微店等平台提供的服务,像逻辑思维公众号,山茶花公众号。

2.代码示例

图片 1

icon

图标,小程序这边还扩展了一下,给了很多默认的图标样式,能满足基本需求

下面介绍我的开发过程,主要是小程序内置组件、数据绑定和相关API的使用。

1.小程序文件介绍

.js     写逻辑规范

.json   设置程序主题背景、系统组件

.wxml  设置UI,View控件

.wxss 设置UI空间间距,背景色,颜色,字体大小(也可以直接在.wxml里面设置)

我们在上面了解了这些文件的作用,而在创建完小程序以后,我们会发现,app.js、app.json、app.wxss三个文件。

app.js在这个文件中我们可以定义一些公共的方法,

如网络请求:

requestApi(url, callback){

wx.request({

url: url,

data: {},

header: {

'Content-Type': 'application/json'

},

success(res){

callback(null, res.data)

}

faile(e){

callback(e)

}

})

}

app.json,首先我们要把创建好的界面在这个文件里面初始化:

{

//初始化文件路径

"pages": [

"pages/fileName/fileName",

"pages/pictures/pictures",

.....

],

//设置标题栏

"window":{

"backgroundTextStyle":"dark",

"navigationBarBackgroundColor": "#feefff",

"navigationBarTitleText": "我的",

"navigationBarTextStyle":"white",

"enablePullDownRefresh": true,

"backgroundColor": "#fff"

},

....

}

因为微信对这个API已经封装得很好了,所以使用起来只需要传入几个参数,绑定一下回调函数即可。// image.css 文件.images-wrapper { padding: 20rpx; background-color: #fff; margin-top: 20rpx;}.images-wrapper-text { font-size: 28rpx;}.images-list { display: flex; margin-top: 20rpx; flex-wrap: wrap;}.images-image { width: 150rpx; height: 150rpx; margin: 10rpx;}.images-image-plus { border: 1px solid #999;}

movable-area

提供一个可以移动的区域,暂时没想到应用场景……

总结

从12月14号开始着手学习微信小程序的相关知识,从申请账号到学习相关组件和API,感觉对于开发者来说,小程序开发上手是比较简单的,微信团队也在不断的更新API和丰富小程序的应用场景。从web时代到移动互联网时代的app再到公众号、小程序,我认为虽然产品的形态会一直改变,但不会改变的是真实的用户诉求,小程序更考验产品经理关注用户使用场景,准确定位用户需求的能力。

本文简单介绍了小程序内置组件、数据绑定和发送请求API的用法,接下来我会完善程序的后台,在服务器端动态获取数据。并探索更适合小程序的使用场景,争取做出好玩有趣的应用。

4).json这个就是设置标题

标题背景色等属性,一般我们在app.json中设置好以后,只需要改title就好了,如有特殊情况,在当前界面的.json文件中修改就好了

还有一些要注意的地方就是在.wxml文件中根据提示创建的控件可能会报错如:

1、<image ...><image/>提示后面的image的"/"位置错了,更改后:

<image...></image>

这样就好了

2、<swiper></swiper>控件中好像必须加<block></block>不加就会报错!

3、有<swiper></swiper>就必须加<swiper-item></swiper-item>控件

暂时先写这么多,明天继续研究更新,因为是新手研究这个,没有html功底,写的不好,请大家见谅,如有错误的地方请大家提出更正!谢谢!

是的,所有的标签都是自定义标签,进一步佐证了微信小程序是原生应用,组件使用很简单,所以很适合快速开发。// wx-picker.js 文件Page({ data: { array:["中国","美国","巴西","日本"], index:0, date:"2016-09-01" }, bindPickerChange: function { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDateChange:function{ this.setData({ date:e.detail.value }) }, bindTimeChange:function{ this.setData({ time:e.detail.time }) }})

progress

进度条

第四步 购物车

图片 2

购物车

购物车实现参考文章【微信小程序 购物车简单实例】,这篇文章作者把实现购物车Demo的过程写的很详细,感谢~

微信小程序已经出来了有一段时间了,我大概研究了研究,在这里总结一下。

图片 3所以,微信小程序更适合用来做低频高需的服务,比如酒店订阅,火车票/机票订阅,招聘,理财等。

text

文本

通过有情怀和有温度的文字达到与用户的情感共鸣,并引导用户消费是这类公众号在商业模式上的闭环。为了提高用户在浏览商品时的体验,提高产品的质感,我参照「iDaily」 app的UI设计开发了这个微信小程序-好物杂志

1)首先我们说.js文件中是写一些逻辑规范的。

如果我们重新创建完以后,文件里面一行代码都没有,这时候我们就要自己添加代码了,这里小程序工具的提示不是很好,大家可以再官网上小程序的API,组件等

const app=getApp()

Page({

data:{

//目前我发现是用来给控件赋值 如:

name: '点击button',

imgs: [ ]

}

onLoad(){//网络请求,设置数据

app.requestApi({

this.setData({

imgs: data.subjects,

name: data.title

}),

clickBtn: funchtion(){

//button点击监听事件

}

})

}

})

同样,样式通过类似CSS的语法,从上面的rpx单位可以看出,这不是真正的CSS,我猜测是CSS的子集,类似RN。开发微信小程序方便么?微信小程序的开发目录结构WX的开发目录结构也很清晰简单。

小程序的生命周期

我们这里上一张图:

图片 4

这张图不但真实反映了Page的生命周期,也将我们之前的猜想做了一个证明,解读这张图大概是这个意思(未必正确,如有错误请指出):

Native层在载入小程序时候,起了两个线程一个的view Thread一个是AppService Thread,我这边理解下来应该就是程序逻辑执行与页面渲染分离,也许是想优化性能,这里更具体一点的解释是(带有猜测了):微信会开一个webview来执行我们的JS逻辑,然后会开一个Native View UI执行页面渲染;两个部分是彼此独立的,页面点击时候触发事件,View线程会获取APPService服务线程(其实就是获取webview),执行其中的js逻辑;APPService执行js逻辑改变数据通过setData调用,触发一个JSCore通信,通知view线程执行UI更新,这里结合这张图做下理解:

① 微信打开一个小程序时,主UI线程继续运行,开启一个webview(我认为这里的主线程就是view Thread,webview就是APPService线程,这里可能有误)

② 主View等待构建页面命令,逻辑层开始载入js逻辑(编译过),微信底层应该会将WXML以及WXSS翻译为JS代码,逻辑层执行JS代码做一些初始化工作APP结束后,开始Page逻辑,而他这个图只有Page的逻辑,没有将app囊括进去,这里也引发了我一个疑惑:我在onLoad的时候打了个断点,而页面这个时候事实上已经进行了结构层的渲染,也就是说页面的WXML逻辑已经执行了:

图片 5

图片 6

如果要按照我现有的逻辑下做解释的话,我认为实例化Page的时候,执行了一个create事件,但是小程序并没有释放onCreate事件让我们做注册,所以我这里知识体系的基础依旧是:

JS逻辑先于Native UI 执行,页面渲染是由实例化Page时候发出

1
JS逻辑先于Native UI 执行,页面渲染是由实例化Page时候发出

所以我觉得,这里的图好像少了一部分(或者说我理解是有问题的):

图片 7

③ 业务线程执行实例化Page逻辑,引发onLoad、onShow事件,onShow的时候页面初步渲染已经结束,如果系统有异步数据或者其他再次数据渲染会执行setData,引发Native UI更新,逻辑结束

但是微信给出的图不可能是错的,而从图上看,首次异步通知是由View Thread发起的,我这里就很是困惑了

本文由9159.com发布于前端,转载请注明出处:为了提高用户在浏览商品时的体验,在这里总结

关键词: