微信小程序前端开发教程

微信小程序开发|微信公共号开发前端|小程序 使用前端开发框架

小程序对应着三个文件
js json wxss

js 为主程序
json 配置全局数据
wxss 样式文件

每一个页面都需要对应这三个文件

小程序的api或者设计文档 微信官方小程序文档 大家自己上去看

json 代码

{
    “pages”: [
        “pages/index/index”,
        “pages/detail/detail”,
        “pages/logs/logs”
    ],
    “window”: {
        “backgroundTextStyle”: “light”,
        “navigationBarBackgroundColor”: “#fff”,
        “navigationBarTitleText”: “新闻头条号”,
        “navigationBarTextStyle”: “black”
    },
    “debug”: true
}

app.json 里面page 需要把用到的页面都需要写到page里面
window 对象中 backgroundTextStyle 整体的风格选择
navigationBarTitleText nav 导航栏的标题

我们看看index 文件夹

javascript 代码

//index.js
//获取应用实例
var app = getApp()
Page({
    data: {
        userInfo: {},
        topNews: [],
        techNews: []
    },
    //事件处理函数
    bindViewTap: function (event) {
        wx.navigateTo({
            url: “../detail/detail?title=” + event.currentTarget.dataset.title + “&url=” + event.currentTarget.dataset.url
        })
    },
    onLoad: function () {
        //网络请求
        wx.request({
            url: ‘https://v.juhe.cn/toutiao/index’,
            data: {
                type: ”,
                key: ‘4f7345f035d2c0cbaac6590dff0f2797’
            },
            method: ‘GET’,
            header: {
                ‘Content-Type’: ‘application/json’
            },
            success: function (res) {
                if (res.data.error_code == 0) {
                    that.setData({
                        topNews: res.data.result.data.slice(0, 5),
                        techNews: res.data.result.data
                    })
                } else {
                    console.log(‘获取失败’);
                }
            }
        })
        //console.log(‘onLoad’)
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function (userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })
    }
})

这里需要一个后台的地址 我申请的是一个聚合数据后台,https://v.juhe.cn/toutiao/index key 4f7345f035d2c0cbaac6590dff0f2797 大家可以免费使用。

html 代码

<swiper indicator-dots=”true” autoplay=”true” interval=”5000″ duration=”1000″>
    <block wx:for=”{{topNews}}”>
        <swiper-item>
            <image src=”{{item.thumbnail_pic_s02}}” class=”slide-image” width=”355″ height=”150″ />
        </swiper-item>
    </block>
</swiper>
<view class=”container news-list”>
    <block wx:for=”{{techNews}}”>
        <view class=”news-item” data-title=”{{item.title}}” data-url=”{{item.url}}” bindtap=”bindViewTap”>
            <view>
                <image class=”list-image” src=”{{item.thumbnail_pic_s}}” mode=”aspectFill” />
            </view>
            <view class=”news-text”>
                <text class=”news-title”>{{item.title}}</text>
                <view class=”news-stamp”>
                    <text>{{item.author_name}}</text>
                    <text>{{item.date}}</text>
                </view>
            </view>
        </view>
    </block>
</view>

数据的绑定 index.wxml

css 代码

.news-list {
    display: flex;
    flex-direction: column;
    padding: 40rpx;
}
.news-item {
    display: flex;
    flex-direction: row;
    height: 200rpx;
    /*width属性解决标题文字太短而导航缩略偏移*/
    width: 100%;
}
.news-text {
    display: flex;
    flex-direction: column;
}
.news-stamp {
    font-size: 25rpx;
    color: darkgray;
    padding: 0 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.news-title {
    margin: 10rpx;
    font-size: 30rpx;
}
.container {
    height: 5000rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*padding: 200rpx 0;*/
    box-sizing: border-box;
}
.list-image {
    width: 150rpx;
    height: 100rpx;
}
.swiper-image {
    width: 100%;
}

wxss 是css 变体 会css就没问题

微信小程序前端界面开发|h5前端开发和微信小程序开发|面试小程序前端开发

» 本文来自:前端开发者 » 《微信小程序前端开发教程》
» 本文链接地址:https://www.rokub.com/3990.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!