文章目录
1、前置条件
如果想长久使用,建议去官方注册个人账号,流程比较繁琐。但入门案例比较简单,可以先不用去微信小程序官方注册个人账号,只需安装官方提供的微信开发者工具,即可在本地电脑创建并运行小程序。
下载链接:https://pan.baidu.com/s/1A2ngDV-LguBBNyhvGjF8kQ?pwd=4qi5
2、结果展示
3、创建微信小程序项目
3.1下载过程无脑下一步即可,打开开发者工具后点击+号,创建新项目
3.2 按照如下的配置点击确定即可,
图片违规的话,看文字描述即可,项目名称和目录自定义,AppID是在官方申请的个人账号中的,我的是wx87c1988b028cb1c1,开发模式选择小程序,不使用云服务,JavaScript基础模板。
4、编写代码
4.1双击点开app.json,代码如下,
app.json是全局配置文件,其中pages表示页面路径,window表示整个页面的配置,tabBar是触摸栏,可以在顶部,也可以在底部。注意,编辑区左侧pages目录的index和logs文件可以删除,copy代码后ctrl+s保存后,代码自动编译,左侧会出现三个文件夹,分别是home,message,about。
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "生活服务",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
4.2 在pages的home下,双击点开home.js,代码如下,
在pages文件夹下,每个文件夹下都有四个xx.js,xx.json,xx.wxml,xx.wxss,其中js后缀的文件保存的是data数据和methods方法,属于逻辑代码,json后缀的文件保存的是本页面的配置(入门暂时用不到),wxml后缀的文件保存的是类似浏览器中的HTML,wxss相当于浏览器中的css样式。
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
SwiperList:[],
GridList:[]
},
getSwiperList(){
wx.request({
url: 'https://www.escook.cn/slides',
method: 'GET',
success: (res) =>{
console.log(res.data);
this.setData({
SwiperList: res.data
})
}
})
},
getGridList(){
wx.request({
url: 'https://www.escook.cn/categories',
method: 'GET',
success:(res)=>{
console.log(res.data);
this.setData({
GridList: res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList();
this.getGridList();
},
})
4.3 双击打开home.wxml,代码如下,
swiper是轮播图标签,view相当于div,image相当于img,image中的src相当于href,wx:for相当于vue中的v-for,wx:key相当于v-key,
<!--pages/home/home.wxml-->
<swiper class="swiperlist" indicator-dots="true" circular="true" autoplay="true" interval="1000">
<swiper-item wx:for="{
{SwiperList}}" wx:key="id">
<image src="{
{item.image}}" mode="heightFix"></image>
</swiper-item>
</swiper>
<view class="gridList">
<view class="gridItem" wx:for="{
{GridList}}" wx:key="id">
<image src="{
{item.icon}}"></image>
<text>{
{item.name}}</text>
</view>
</view>
<view class="images">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
4.4双击打开home.wxss,代码如下,
相当于css样式一样的效果
/* pages/home/home.wxss */
.gridList{
display: flex;
flex-wrap: wrap;
border-left: 1px solid gray;
border-top: 1px solid gray;
}
.gridItem{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.gridItem image{
width: 60rpx;
height: 60rpx;
}
.gridItem text{
font-size: 24rpx;
text-align: center;
margin-top: 10rpx;
}
.images{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.images image{
width: 45%;
}
5、运行展示
复制代码后,发现部分页面图片加载不出来,记得勾选一下如下选项,详情->本地设置->不校验…,设置完毕后就能全部加载出来了。
6、源码及出处
点这里获取源码,参考某马b站的教学视频