微信小程序demo推荐：汇率计算器；Flexbox，数据缓存及绑定

柿霖不是林

一个微信小程序版的汇率计算器。练手项目，主要是为了学习微信小程序开发。

交互参考了极简汇率。

界面及计算的部分代码参考了sCalc。

Description

涉及微信小程序开发相关知识：

• CSS Flexbox布局
• Page、window、App全局设置，wxml、wxsss、js、json文件使用方法
• 事件绑定、页面跳转
• 数据缓存、数据绑定等API
  

代码示例：


[mw_shl_code=html,true]//index.js

var cName = require('../../utils/currencyNames');

//获取应用实例
var app = getApp()
        Page({
            data: {
                progressTip: ''
            },
                onLoad : function (options) {
                    // 页面初始化 options为页面跳转所带来的参数
                },
                onReady : function () {
                    // 页面渲染完成
                },
                onShow : function () {
                    // 页面显示


                    this.setData({
                        "progressTip": "正在刷新汇率列表..."
                    });

            //1.加载汇率列表
                    var that = this;
                    wx.request({
                        url: app.globalData.fixerApi,
                        data: {},
                        method: 'GET',
                        success: function (res) {
                            //如何解析yahoo api传回来的xml？？
                            // success
                            if (res.statusCode == 200) {

                                //补充一个USD做基准利率
                                res.data.rates.USD = 1.0000;

                                wx.setStorageSync('cRates', res.data.rates);

                                //2.加载货币名称列表
                                //TODO：可能要从其他api获取，這里暂时用静态文件代替
                                that.setData({
                                    "progressTip": "正在刷新货币名称..."
                                });
                                wx.setStorageSync('cNames', cName.names);

                                //3.读取用户本地存储的已选货币列表
                                //如果没有，就默认填入四个
                                that.setData({
                                    "progressTip": "检查已选货币..."
                                });
                                var selectCurrencyList = wx.getStorageSync('selectCurrencyList') || []
                                if (selectCurrencyList.length == 0) {
                                    selectCurrencyList = [
                                { id: 0, currencyNameEN: "CNY", currencyCal: "", currencyValue: 0, currencyNameCN: cName.names["CNY"] },
                                { id: 1, currencyNameEN: "HKD", currencyCal: "", currencyValue: 0, currencyNameCN: cName.names["HKD"] },
                                { id: 2, currencyNameEN: "USD", currencyCal: "", currencyValue: 0, currencyNameCN: cName.names["USD"] },
                                { id: 3, currencyNameEN: "JPY", currencyCal: "", currencyValue: 0, currencyNameCN: cName.names["JPY"] },
                                    ];

                                    wx.setStorageSync('selectCurrencyList', selectCurrencyList);
                                }
                                 
                                //4.读取用户本地存储的默认选中货币Id
                                //如果没有，默认为2
                                var highlightedId = wx.getStorageSync('highlightedId') || 0;
                                if (highlightedId == 0) {
                                    highlightedId = 2;

                                    wx.setStorageSync('highlightedId', highlightedId);
                                }


                                //5.所有准备工作完成，redirect到main
                                that.setData({
                                    "progressTip": "正在载入首页..."
                                });
                                wx.redirectTo({
                                    url: '../main/main'
                                })

                            }
                            console.log(res);
                        },
                        fail: function () {
                            // fail
                        },
                        complete: function () {
                            // complete
                        }
                    })
                },
                onHide : function () {
                        // 页面隐藏
                },
                onUnload : function () {
                        // 页面关闭
                }
        })[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

gengshunrong

啥也不说了，感谢楼主分享哇！

hagen100

休息休息

superLee

正需要，支持楼主大人了！

szomega

初级但有用的东西！

Ywenli

感谢楼主分享

热心市民王先生

有制作教程么

hou18328051836

正需要，谢谢楼主

陈国鹏

感谢感谢感谢感谢感谢

ssxuss12

正需要，支持楼主大人了！