Basic wechat mini program 基础微信小程序

# 开发工具下载
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;  
}