# 开发工具下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
# 微信平台注册
https://mp.weixin.qq.com
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
一个小程序主体部分根目录由三个文件组成
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表
一个小程序页面由四个文件组成
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式
# 以下是一个图片展示的DEMO代码,外部资源和配置部分已去除,参考网上多个资源无固定引用
# 由于小程序包的免费上传大小限制 -> 图片需从外部通过URL引入 -> 需配置信任域名,另外发布审核需等待数日
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
//app.json
{
"pages": [
"pages/index/index",
"pages/image/image"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "~喵喵~",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
//project.config.json
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false,
"coverView": true,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false
},
"compileType": "miniprogram",
"libVersion": "2.10.2",
"appid": "wx1d2668c71c42998a",
"projectname": "WeChatCat-master",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
//sitemap.json
{
"desc": "欢迎关注公众号_homelessdashu_不回家的大叔",
"rules": [{
"action": "allow",
"page": "*"
}]
}
//utils/constants.js
//url相关
var BASE_URL = "XXXX";
var CAT_FOLDER_URL = BASE_URL.concat("/static/XXXX");
// 将方法、变量暴露出去
module.exports = {
BASE_URL: BASE_URL,
CAT_FOLDER_URL: CAT_FOLDER_URL
}
//utils/util.js
// 工具类
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
//index/index.js
//获取应用实例
var app = getApp()
Page({
data: {
items: [],
hidden: false,
loading: false,
// loadmorehidden:true,
plain: false
},
onItemClick: function (event) {
var targetUrl = "/pages/image/image";
if (event.currentTarget.dataset.url != null)
targetUrl = targetUrl + "?url=" + event.currentTarget.dataset.url;
wx.navigateTo({
url: targetUrl
});
},
// loadMore: function( event ) {
// var that = this
// requestData( that, mCurrentPage + 1 );
// },
onReachBottom: function () {
console.log('onLoad')
var that = this
that.setData({
hidden: false,
});
requestData(that, mCurrentPage + 1);
},
onLoad: function () {
console.log('onLoad')
var that = this
requestData(that, mCurrentPage + 1);
}
})
/**
* 定义几个数组用来存取item中的数据
*/
var mUrl = [];
var mDesc = [];
var mWho = [];
var mTimes = [];
var mTitles = [];
var mCurrentPage = 0;
// 引入utils包下的js文件
var Constant = require('../../utils/constant.js');
/**
* 请求数据
* @param that Page的对象,用来setData更新数据
* @param targetPage 请求的目标页码
*/
function requestData(that, targetPage) {
wx.showToast({
title: '加载中',
icon: 'loading'
});
var img_list = []
for (var i = 0; i < 10; i++) {
var file_name = '1000' + ("000" + Math.round((Math.random()) * 16)).substr(-2) + '.gif';
img_list.push({ url: Constant.CAT_FOLDER_URL + file_name })
}
that.setData({ items: img_list })
}
/**
* 绑定接口中返回的数据
* @param itemData Gank.io返回的content;
*/
function bindData(itemData) {
var url = itemData.url.replace("//ww", "//ws");
var desc = itemData.desc;
var who = itemData.who;
var times = itemData.publishedAt.split("T")[0];
mUrl.push(url);
mDesc.push(desc);
mWho.push(who);
mTimes.push(times);
mTitles.push("publish by:" + "@" + who + " —— " + times);
}
//index/index.wxml
<!--index.wxml-->
<view>
<view wx:key="property" class= "card" wx:for = "{{items}}">
<view data-url="{{item.url}}" bindtap = "onItemClick">
<image class= "image" mode="aspectFill" src="{{item.url}}"/>
<view class="title">{{item.title}}</view>
</view>
</view>
</view>
//index/index.wxss
/**index.wxss**/
.card {
border: 2px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
position: relative;
}
.loadmore {
border: 0px solid #ffffff;
border-radius: 5px;
background-color: #ffffff;
box-shadow: 0px 5px 1px #cccccc;
margin: 8px;
}
.image{
width:100%;
height:240px;
}
.title {
padding: 14px;
font-size: 14px;
}
//image/image.js
Page({
data: {
url: "",
hidden: false,
toastHidden: true,
modalHidden: true,
toastText: "数据异常",
loadingText: "加载中..."
},
onLoad: function (options) {
that = this;
if (options == null || options.url == null) {
this.setData({ hidden: true, toastHidden: false });
return;
}
this.setData({
hidden: true,
toastHidden: true,
url: options.url
})
},
//Toast信息改变
onToastChanged: function (event) {
this.setData({ toastHidden: true });
},
// 长按
onlongclick: function () {
this.setData({ modalHidden: false });
},
// 保存
onSaveClick: function (event) {
var mUrl = "";
if (event.currentTarget.dataset.url != null)
mUrl = event.currentTarget.dataset.url;
console.log("download:" + mUrl);
saveImage(mUrl);
},
// 取消
onCancelClick: function (event) {
this.setData({ modalHidden: true });
},
});
var that;
/**
* 保存图片
*/
function saveImage(mUrl) {
that.setData({
hidden: false,
toastHidden: true,
modalHidden: true,
loadingText: "下载中..."
});
wx.downloadFile({
url: mUrl,
type: 'image',
success: function (res) {
console.log("download success");
that.setData({
hidden: true,
toastHidden: false,
toastText: "保存成功"
});
},
fail: function (res) {
console.log("download fail");
that.setData({
hidden: true,
toastHidden: false,
toastText: "保存失败,请稍后再试"
});
},
complete: function (res) {
console.log("download complete");
}
})
}
//image/image.wxml
<!--image.wxml-->
<view >
<loading hidden="{{hidden}}" >
{{loadingText}}
</loading>
<toast hidden="{{toastHidden}}" bindchange="onToastChanged">
{{toastText}}
</toast>
<view bindlongtap = "onlongclick">
<image class = "bigImage" mode="aspectFill" src="{{url}}" />
</view>
<modal title="是否保存?" confirm-text="保存" cancel-text="取消" data-url="{{url}}"
hidden="{{modalHidden}}" bindconfirm="onSaveClick" bindcancel="onCancelClick">
</modal>
</view>
//image/image.wxss
/*image.wxss*/
.bigImage{
width: 95%;
height: 1000rpx;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。