微信小程序——简单的界面设置

微信小程序——简单的界面设置

微信小程序开发准备

第一步：申请小程序账号（微信公众平台）
第二步：下载微信开发者工具（微信公众平台点击文档、小程序开发、下载） 

开发语言

javascript、html等

基本语法： 

1.view标签相当于div：多个view标签自动换行显示
2.text标签：多个text标签一行显示
3.button标签:按钮
4.swiper标签：轮播图可以实现图片的轮播 

小程序制作：

 1.index.js: 

Page({data: {imgUrls: ['/图片/0c46df96a46b1efadd31cfc2f397638e.jpg',//图片的相对位置'.jpg','.jpg'//图片的地址],//可在微信小程序开发平台中获取相关代码，辅助index.wxml使用（实现轮播图的功能）indicatorDots: true,autoplay: true,//自动播放interval: 2000,//图片播放间隔（2s）duration: 1000,//每张图片播放的时间（1s）circular: true,//循环播放图片prolist:[{//创立一个列表，用来实现多张图片的插入，用循环来辅助实现（在index.wxml中）proname:"name1",proprice:10,}, {proname: "name2",proprice: 20,}, {proname: "name3",proprice: 30,}, {proname: "name4",proprice: 40,}, {proname: "name5",proprice: 50,}, {proname: "name6",proprice: 60,},]}
})

2.index.wxml 

<wxs module = "filters" src="index.wxs"></wxs>//链接index.wxs
<swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}'><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item></block>
</swiper>//在微信小程序中复制代码，辅助index.wxml使用,实现轮播图的功能实现
<view class = "content"><view class = 'pro' wx:for="{{prolist}}">//循环列表prolist<image src='/图片/0c46df96a46b1efadd31cfc2f397638e.jpg'></image><view class='proname'>{{item.proname}}</view>//内容为列表中proname的内容<view class='proprice'>$ {{Fix(item.proprice,2)}}</view>//调用模块实现保留几位小数的功能，内容为列表中prorice的内容，其中$原样输出</view>
</view>

3.index.wxs 

var filters = {toFix : function(val,count){Fixed(count)}
}
ports = {toFix : Fix
} 
//实现保留几位小数的功能实现，辅助index.wxml使用

4.index.wxss

swiper,swiper image{//整个轮播图和轮播图片实现宽度和高度的定义width: 100%;height: 500rpx;
}
.content{width:100%;display: flex;flex-wrap: wrap;justify-content: space-around;//用来实现其中的内容不紧邻，周围有空白margin-top: 20rpx;//实现整个框架的顶外边距顶端与上一个的距离
}
.pro{width:30%;margin-bottom: 10rpx;//实现外边距底部与下一个的距离
}
.pro image{width:100%;height: 200rpx;
}
.proprice{color: yellow;
}

5.app.json 

//该代码用来实现底部菜单功能
{"pages":["pages/index/index","pages/cart/cart",//第二个按钮（名字随意取）"pages/user/user"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "00B26A",//窗口栏顶部的颜色（可用颜色提取器来提取）"navigationBarTitleText": "商城",//窗口栏顶部的名字"navigationBarTextStyle":"white"//窗口栏文字的颜色},//以下为按钮的操作"tabBar":{"list":[{"pagePath":"pages/index/index",//按钮连接的位置"text":"text1",//按纽显示的名字"iconPath":"/图片/1.png",//按钮未点击显示的图片"selectedIconPath":"/图片//3.png"//按钮点击后显示的图片},{//按钮图片必须为.png的形式，且大小有要求"pagePath": "pages/cart/cart","text": "text2","iconPath": "/图片/3.png","selectedIconPath": "/图片/1.png"},{"pagePath": "pages/user/user","text": "text3","iconPath": "/图片/3.png","selectedIconPath": "/图片/1.png"}]}
}

6.app.json

/**app.wxss**/
//用来设置微信小程序的一些基本操作
page{color: blue;font-size: 28rpx;font-family: microsoft yahei;//字体的选择
}

效果展示