Я занимаюсь Android-разработкой, и недавно компания неожиданно попросила меня изучить мини-программы WeChat. Спрос на мини-программы WeChat сейчас растет, и компании всех размеров теперь приходят, чтобы сделать мини-программу для меня.Мини-программы WeChat пользуются популярностью у все большего числа пользователей благодаря своим супер-удобным функциям the-fly». Благо, ведь иногда не хочется тратить время или трафик на загрузку приложения, апплет можно отобразить перед пользователем в очень легкой форме, и, наконец, завершить определенный бизнес-процесс. При этом функции и UI текущего апплета не намного хуже родного приложения. Я думаю, что мини-программы должны быть будущим направлением развития (это подтверждено развитием последних нескольких лет). Что ж, без лишних слов, давайте начнем прямо сейчас.
Базовая структура мини-программ WeChat
скачать первыминструменты разработчикаСоздайте новый проект, выберите пустой каталог в качестве пути к проекту и используйте тестовый номер, если приложение отсутствует.
Структура проекта после создания проекта выглядит следующим образом
Глобальный файл приложения
1. app.js — это логика апплета, здесь апплет может зарегистрировать только одно приложение
App({//生命周期
onLaunch: function() { },//监听初始化
onShow: function() { },//监听显示（进入前台）
onHide: function() { },//监听隐藏（进入后台：按home离开微信）
onError: function(msg) { },//监听错误
//自定义的全局方法和全局变量
globalFun:function(){},
globalData: 'I am global data'
})
2. app.json — это глобальная конфигурация текущего апплета, включая все пути к страницам, производительность интерфейса, тайм-аут сети, нижняя вкладка и т. д. page.json может переопределять свойства app.json, устанавливая отдельную страницу для стоимости страницы
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
3. app.wxss — это глобальный стиль апплета, а wxss соответствует css в сети.
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
Страница содержит файлы
Страницы — это страницы, содержащиеся в апплете.Создайте пустой каталог в папке страниц, щелкните правой кнопкой мыши и выберите «Создать страницу», чтобы сгенерировать необходимые файлы для страницы, а именно: page.js, page.json, page.wxss, page.wxml. , page.json и page.wxss необязательны
1. page.js Одна страница, одна страница, используется для управления жизненным циклом страницы, пользовательскими методами и параметрами.
Page({
data: {text: "This is page data."},//页面数据，用来维护视图，json格式
onLoad: function(options) { },//监听加载
onReady: function() { },//监听初次渲染完成
onShow: function() { },//监听显示
onHide: function() { },//监听隐藏
onUnload: function() { },//监听卸载
onPullDownRefresh: function() { },//监听下拉
onReachBottom: function() { },//监听上拉触底
onShareAppMessage: function () { },//监听右上角分享
//如下为自定义的事件处理函数（视图中绑定的）
viewTap: function() {//setData设置data值，同时将更新视图
this.setData({text: 'Set some data for updating view.'})
}
})
2. page.wxml - вид страницы для отображения данных. Вид соответствует div нашего html, а текст соответствует span. Автоматически сгенерированный index.wxml выглядит следующим образом, реализуя вход по клику функция
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
3. Привязка данных в сочетании с официальными примерами, напишите простую демо-страницу
page.wxml
<!-- 简单绑定 -->
<view> {{ message }} </view>
<!-- 组件属性 -->
<view id="item-{{id}}">{{id}}</view>
<!-- 控制属性 -->
<view wx:if="{{condition}}"> condition</view>
<!--关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。-->
<checkbox checked="{{false}}"> </checkbox>
<!-- 字符串运算 -->
<view>{{"hello" + name}}</view>
<!-- 数据路径运算 -->
<view>{{object.key}} {{array[0]}}</view>
<!-- 循环遍历 -->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
<!-- 模板 -->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"/>
<!-- 点击事件 -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
page.js
Page({
data: {
message: 'Hello MINA!',
id: 0,
condition: true,
name: 'MINA',
object: {
key: 'Hello '
},
array: ['MINA'],
array: [{
message: 'foo',
}, {
message: 'bar'
}],
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
},
tapName: function (event) {
console.log(event)
}
})
Дубан Топ250
Мне всегда нравилось использовать интерфейс Douban Movie для изучения новых технологий, ха-ха
Посмотрите мою предыдущую статью,Python3 сканирует фильмы Douban Top250
Интерфейс Douban ограничивает доступ к апплету WeChat и использует другой интерфейс, а возвращаемые данные согласуются.Douban.u IEEE.com/V2/movie/to…
Кроме того, при разработке IDE не забудьте поставить галочку Не проверять доменное имя.После официального запуска вы должны присвоить доменное имя легальному доменному имени.
Код непосредственно ниже
app.json
{
"pages": [
"pages/list/list",
"pages/detail/detail"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#072",
"navigationBarTitleText": "豆瓣电影",
"navigationBarTextStyle": "light"
}
}
list.wxml
<!--pages/list/list.wxml-->
<wxs module="filters" src="./list.wxs"></wxs>
<view wx:for="{{movies}}" wx:key="{{item.id}}" data-index="{{index}}" class ="movie_item" bindtap="goDetail">
<image class="image" src="{{item.images.small}}"></image>
<view class="movie_info">
<text class="title">{{item.title}}</text>
<view class="star">
<text class="{{filters.getRating(item.rating.average)}}"></text>
<text class="rating_num">{{filters.toFix(item.rating.average)}}</text>
</view>
</view>
</view>
list.js
var start = 0;
Page({
start: 0,
/**
* 页面的初始数据
*/
data: {
movies: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
this.loadMore(that);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
start = 0;
var that = this;
this.loadMore(that);
wx.stopPullDownRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
this.loadMore(that);
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
loadMore:function(that){
that.getMovie(function (d) {//回调函数，根据数据设置页面data，更新到视图
wx.hideToast();//隐藏加载框
var list = that.data.movies;
for(var i=0;i<d.length;i++){
list.push(d[i]);
}
that.setData({ movies: list })//更新数据，视图将同步更新
})
},
getMovie:function(fn) {
wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 })
wx.request({//请求服务器，类似ajax
url: 'https://douban.uieee.com/v2/movie/top250?start='+start,
header: { 'content-type': 'json' },
success: function (res) {
start=start+20;
console.log(res)
fn(res.data.subjects) }//成功后将数据传给回调函数执行
})
},
goDetail:function(e) {
var that = this
//拿到点击的index下标
var index = e.currentTarget.dataset.index
var movie = JSON.stringify(that.data.movies[index])
wx.navigateTo({
url: '../detail/detail?movie='+movie,
})
}
})
list.wxss
.movie_item {
margin: 8px;
border-radius: 5px;
background-color: #fff;
box-shadow: 1px 1px 1px #cccccc;
position: relative;
display: block;
padding: 8px;
overflow: hidden;
box-sizing: border-box;
}
.image {
width: 64px;
height: 100px;
margin-right: 15px;
background-color: #eeeeee;
float: left;
}
.movie_info {
float: left
}
.title {
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #669;
}
.rating10-t, .rating15-t, .rating20-t, .rating25-t, .rating30-t, .rating35-t, .rating40-t, .rating45-t, .rating50-t, .rating-t{
display: inline-block;
zoom: 1;
background: url(https://img3.doubanio.com/f/shire/b8f4c3672ef81106701071831e22422a745d3b74/pics/rating_icons/ic_rating_s.png) no-repeat;
width: 55px;
height: 11px;
margin: 0 3px 0 0;
overflow: hidden;
}
.rating50-t {
background-position: 0 0px;
}
.rating45-t {
background-position: 0 -11px;
}
.rating40-t{
background-position: 0 -22px;
}
.rating_num {
color: #e09015;
padding: 0 5px 0 0;
font-size: 12px;
}
list.wxs
var filters = {
getRating:function(value){
return "rating"+Math.round(value)*5+"-t";
},
toFix: function (value) {
return value.toFixed(1)//此处2为保留两位小数
}
}
module.exports = {
getRating: filters.getRating,
toFix: filters.toFix
}
Несколько заметок
1. Измените данные в js страницы
setData({ movies: list })
2. При отображении звёздного рейтинга Дубана звёздный класс фильмов с разным баллом разный.Нам нужно получить класс по баллу, а метод расчёта прописан в файле wxs. Представьте метод в wxml следующим образом
<text class="{{filters.getRating(item.rating.average)}}"></text>
3. Переход на страницу и передача данных могут быть выполнены по запросу.
var movie = JSON.stringify(that.data.movies[index])
wx.navigateTo({
url: '../detail/detail?movie='+movie,
})
Данные могут быть извлечены в методе onload следующей страницы
onLoad: function (options) {
var that = this
var movie = JSON.parse(options.movie)
console.log(movie.images.small)
that.setData({
movie: movie
})
},
Схема эффекта выглядит следующим образом