微信小程序列表开发-个人中心界面(一)

先放个效果图让你们看一下是不是你们需要的，到时候会写几篇博客把里面的组件也讲一下

.wxml

.wxss




.js



.json

我里面的引用的照片都放在image文件里的，image文件是放在pages文件下面的，因为放的位置不同，图片引用的路径就不一样。

以上是所有的代码展示下面先大概讲一下思路
.wxml:
第三行是获取微信微信的头像，第四行是获取微信的名字，是个固定的语法，还有其他获取自己微信的信息，官方文档里都有讲。
然后从第9行是利用了一个微信的for循环来获取js的里的数据（会专门写个有关for循环的）。可以看到js文件里的data里的userListInfo:里面就是for循环的内容。 wx:for="{{userListInfo}}"这是微信for循环获取内容的固定语法。
第12行 ，是获取js文件里的userListInfo:里面的照片的（后续会在for循环具体讲）是获取的这个照片

第15行就是获取js里userListInfo的text:里的文字，

第17行 <view class="listimage" style='background-image: url(../image/1.png);'></view>是获取这个图标的

wxml里面的结构就差不多是这样的
.json:
“navigationBarTitleText”: "个人中心"是设置微信最上端的名字

也可以改变背景颜色之类，都在json文件里改（可看官方文档学习）。
“usingComponents”: {},目前在这个界面没用到，就不做讲解。
.wxss：
里面就都是对wxml里面进行进行样式的改变跟css一样的功能，后面会更新细讲里面的内容。
.js:
逻辑交互，在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。例如在wxml里面wx:for就是调用js里的数据。

 后续会更新细讲wxss里面的内容和js文件里的内容，如果以上对你有帮助可以看完我写的有关这次界面的博客大家一起学习。

想要源码关注公众号：小朱Code，发送小程序页面即可