iOS 加载本地html,css,js

Demo源码

css中嵌入base64

 .style {
      background: url(images/logo.gif?__inline);
  }

编译后:

 .style {
      background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
  }

二、不难的步骤条组件

  365bet亚洲真人 1

互联网官方网站开辟模板—-基于require+gulp的左右端分离的脚手架工具
体系地址

UIWebView 加载html

365bet亚洲真人,Fis3的三大特色


财富一定:获取别的付出中所使用能源的线上路径

内容嵌入:把三个文本的始末(文本)或然base64编码(图片)嵌入到另叁个文书中

依附评释:在七个文书文件内标识对别的能源的借助关系

1、通过react自定义的组件举办模拟

   
注:只是用了react,用到相关react的js请到  下的build文件夹下载。

  html如下:

365bet亚洲真人 2365bet亚洲真人 3

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="step.css">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Line = React.createClass({
            render: function() {
                let self = this;
                let active = this.props.active;
                let value = 0;//进度条没有加载
                if(active == 1) {//进度条加载完成
                    value = 100;
                }
                return (
                    <div className="ant-progress-line">
                        <div>
                            <div className="ant-progress-outer">
                                <div className="ant-progress-inner">
                                    <div style={{width: value+"%"}} className="ant-progress-bg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            }
        });

        var Circle = React.createClass({
            render: function(){
                let content = this.props.content;
                let number = this.props.number;
                let active = this.props.active;
                let self = this;
                return (
                    <div className="ant-steps-head">
                        <div className="ant-steps-head-inner" style={active ? {backgroundColor: "#2db7f5"} : {backgroundColor: "#c1c1c1"}} onClick={function(){self.props.preStep(number)}}>
                             {number+1} 
                        </div>
                        <div className="ant-steps-text" style={active ? {color: "#2db7f5"} : {color: "#c1c1c1"}}>
                            {content}
                        </div>
                    </div>
                );
            }
        });

        var Step = React.createClass({
            getInitialState: function() {
                return { 
                       curStep: 0,//当前正操作哪一步
                    maxStep: 0,//执行最远的一步
                };
            },

              nextStep: function(){
                  let self = this;
                  let curStep = this.state.curStep;
                  let maxStep = this.state.maxStep;
                  this.setState({
                      curStep: curStep+1,
                      maxStep: maxStep <= curStep ? curStep+1 : maxStep,
                  });
              },

              preStep: function(toStep){
                  let maxStep = this.state.maxStep;
                  let curStep = this.state.curStep;
                  if(toStep > maxStep || toStep == curStep) return;
                  this.setState({
                      curStep: toStep,
                  });

                  if(this.props.mainPreStep)
                      this.props.mainPreStep(toStep);
              },

            render: function(){
                let self = this;
                let contents = self.props.contents;
                let steps = contents.map(function(content, index){
                    let activeCircle = true;
                    let activeLine = false;
                    if(self.state.curStep > 0 && self.state.curStep-1 >= index) activeLine = true;
                    if(index > self.state.curStep) activeCircle = false;
                    if(index == contents.length-1) {
                        if(index == 0) {
                            return (
                                <div className="step-main-div">
                                    <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                </div>
                            );
                        } else {
                            return (
                                <div className="step-main-div step-main-div-move">
                                    <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                </div>
                            );
                        }
                    } else if(index == 0) {
                        return ( 
                            <div className="step-main-div">
                                <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                <Line active={activeLine}/>
                            </div>
                        );
                    } else {
                        return (
                            <div className="step-main-div step-main-div-move">
                                <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                <Line active={activeLine}/>
                            </div>
                        );
                    }
                });

                return (
                    <div style={{width: "100%"}}> 
                        {
                            steps
                        }
                    </div>
                );
            }
        });

        var MainDiv = React.createClass({
            nextStep: function(){
                this.refs.myStep.nextStep();
            },
            render: function(){
                return (
                    <div>
                        <div style={{marginTop: "100px", width: "70%", display: "inline-block"}}>
                            <Step contents={["first", "second", "third", "forth"]} ref="myStep"/>
                        </div>
                        <div style={{display: "inline"}}>
                            <a href="javascript:void(0)" onClick={this.nextStep}>next</a>
                        </div>
                    </div>
                );
            }
        });


          ReactDOM.render(
                <MainDiv />,
               document.getElementById('example')
         );
    </script>
  </body>
</html>

View Code

  css如下:

365bet亚洲真人 4365bet亚洲真人 5

.ant-steps-head {
    width: 200px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.ant-steps-text{
    width: 200px;
    font-size: 16px;
}

.ant-steps-head-inner {
    margin: auto;
    border-color: #2db7f5;
    display: block;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    font-size: 18px;
    -webkit-transition: background-color .3s ease,border-color .3s ease;
    transition: background-color .3s ease,border-color .3s ease;
}

.ant-steps-icon {
    color: #fff;
    line-height: 1;
    top: -1.5px;
    position: relative;
}


.ant-progress-line {
    width: 235px;
    margin-left: -75px;
    line-height: 40px;
    position: relative;
    display: inline-block;
}

.ant-progress-outer {
    padding-right: 45px;
    margin-right: -45px;
    display: inline-block;
    width: 100%;
}

.ant-progress-inner {
    display: inline-block;
    width: 100%;
    background-color: #c1c1c1;
    border-radius: 100px;
    vertical-align: middle;
}


.ant-progress-bg {
    border-radius: 100px;
    height: 4px;
    background-color: #2db7f5;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
    position: relative;
}

.step-main-div{
    display:inline;
    width: 315px;
}

.step-main-div-move{
    margin-left: -120px;
}

View Code

目录结构

  • bin
    • render.js——(在gulpfile文件中运用到)解析layout中的模板html,将全部的html产出到src/html中
  • dist——生成出来的末尾工程结构
  • src
    • conf——配置文件目录
    • css——由less文件出现的css文件
    • data——mock数据文件夹
    • html——由layout中的html文件深入分析出来的末梢html文件
    • images——图片文件夹
    • js——js文件夹
    • layout——html的源文件夹
    • less——less文件夹
    • vendor——第三方库
    • widget——公用的html模板

365bet亚洲真人 6工程图片

css嵌入

<link rel="stylesheet" type="text/css" href="demo.css?__inline">

编译后:

<style>img { border: 5px solid #ccc; }</style>

三、demo下载

  

应用到的技艺

  • require:达成模块化开辟
  • mock:达成本地模拟服务器端重临数据
  • browsersync:运维本地浏览页面,并贯彻当源码改变时页面实时刷新
  • art-template:使用到了html模块化封装,还会有js模板
  • gulp-autoprefixer:使用gulp-autoprefixer依据设置浏览器版本自动管理浏览器前缀
  • 图形压缩,less转css,css和js压缩,css生成sourcemap
  • html是一段字符串(js,css是工程里的文书)
  • html是工程的贰个html文件(js,css是工程里的文件)
  • html,css,js是从服务器上下载来的保留到地面

Fis3版本:v3.4.22

2、通过webpack+react+es6进展效仿

  注:可以fork我的github  ,当然能够从0初阶…

   (1)、首先为品种确立叁个名字,比如“webpack+react”,
 创建src/step、src/css和build目录,在项目根目录下树立package.json文件,内容如下:

365bet亚洲真人 7365bet亚洲真人 8

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline",
    "build-before": "webpack --display-error-details --progress --colors -p",
    "build": "webpack --config webpack.build.config.js --display-error-details --progress --colors",
    "build-watch": "webpack --display-error-details --progress --colors --watch --debug --devtool source-map --output-pathinfo",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  "keywords": [
    "react",
    "webpack"
  ],

  "author": "hjzgg",

  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "~0.16.0",
    "style-loader": "~0.12.3",
    "react": "^0.14.3",
    "react-hot-loader": "^1.3.0",
    "react-router": "^1.0.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },

  "dependencies": {
    "lodash": "^3.9.3",
    "react": "^0.14.3",
    "react-dom": "^0.14.3"
  }
}

View Code

  (2)、第二步就是成立我们webpack的配备文件webpack.config.js

365bet亚洲真人 9365bet亚洲真人 10

var webpack = require('webpack');
module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./src/step/app.js"
    ],
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot','babel-loader?presets[]=react,presets[]=es2015'] },
            { test: /\.css$/, loader: 'style!css'}
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

View Code

  (3)、入口文件 index.html

365bet亚洲真人 11365bet亚洲真人 12

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
    <!<link rel="stylesheet" type="text/css" href="src/css/main.css"> -->
    <!-- <link rel="stylesheet" type="text/css" href="src/css/step.css"> -->
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

View Code

    注意,这里面援引的bundle.js文件特别首要,它是我们打包后的入口文件,不引进它程序是跑不起来的。

  (4)、程序的输入文件src/step/app.js,在这里加载了大家自定义的步子条组件

365bet亚洲真人 13365bet亚洲真人 14

import React from 'react';
import ReactDOM from 'react-dom';
import MainDiv from './mainDiv';

ReactDOM.render
(
   <MainDiv />,
   document.body
);

View Code

  (5)、src/step/app.js中援引的src/step/mainDiv.js

365bet亚洲真人 15365bet亚洲真人 16

import React from 'react';
import Step from './Step';

export default class MainDiv extends React.Component{
    constructor(props){
        super(props);
        this.nextStep = this.nextStep.bind(this);
    }

    nextStep(){
        this.refs.myStep.nextStep();
    }

    render(){
        return (
            <div>
                <div style={{marginTop: "100px", width: "70%", display: "inline-block"}}>
                    <Step contents={["first", "second", "third", "forth"]} ref="myStep"/>
                </div>
                <div style={{display: "inline"}}>
                    <a href="javascript:void(0)" onClick={this.nextStep}>next</a>
                </div>
            </div>
        );
    }
}

View Code

  (6)、src/step/mainDiv.js中引用的src/step/Step.jsp
 (自定的步调条组件)

365bet亚洲真人 17365bet亚洲真人 18

import React from 'react';
import '../css/step.css';
class Line extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        let self = this;
        let active = this.props.active;
        let value = 0;//进度条没有加载
        if(active == 1) {//进度条加载完成
            value = 100;
        }
        return(
            <div className="ant-progress-line">
                <div>
                    <div className="ant-progress-outer">
                        <div className="ant-progress-inner">
                            <div style={{width: value+"%"}} className="ant-progress-bg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

class Circle extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        let content = this.props.content;
        let number = this.props.number;
        let active = this.props.active;
        let self = this;
        return (
            <div className="ant-steps-head">
                <div className="ant-steps-head-inner" style={active ? {backgroundColor: "#2db7f5"} : {backgroundColor: "#c1c1c1"}} onClick={function(){self.props.preStep(number)}}>
                     {number+1} 
                </div>
                <div className="ant-steps-text" style={active ? {color: "#2db7f5"} : {color: "#c1c1c1"}}>
                    {content}
                </div>
            </div>
        );
    }
}

class Step extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           curStep: 0,//当前正操作哪一步
           maxStep: 0,//执行最远的一步
        };

        this.nextStep = this.nextStep.bind(this);
        this.preStep = this.preStep.bind(this);
      }

      nextStep(){
          let self = this;
          let curStep = this.state.curStep;
          let maxStep = this.state.maxStep;
          this.setState({
              curStep: curStep+1,
              maxStep: maxStep <= curStep ? curStep+1 : maxStep,
          });
      }

      preStep(toStep){
          let maxStep = this.state.maxStep;
          let curStep = this.state.curStep;
          if(toStep > maxStep || toStep == curStep) return;
          this.setState({
              curStep: toStep,
          });

          if(this.props.mainPreStep)
              this.props.mainPreStep(toStep);
      }

    render(){
        let self = this;
        let contents = self.props.contents;
        let steps = contents.map(function(content, index){
            let activeCircle = true;
            let activeLine = false;
            if(self.state.curStep > 0 && self.state.curStep-1 >= index) activeLine = true;
            if(index > self.state.curStep) activeCircle = false;
            if(index == contents.length-1) {
                if(index == 0) {
                    return (
                        <div className="step-main-div">
                            <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                        </div>
                    );
                } else {
                    return (
                        <div className="step-main-div step-main-div-move">
                            <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                        </div>
                    );
                }
            } else if(index == 0) {
                return ( 
                    <div className="step-main-div">
                        <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                        <Line active={activeLine}/>
                    </div>
                );
            } else {
                return (
                    <div className="step-main-div step-main-div-move">
                        <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                        <Line active={activeLine}/>
                    </div>
                );
            }
        });

        return (
            <div style={{width: "100%"}}> 
                {
                    steps
                }
            </div>
        );
    }
}

module.exports = Step;

View Code

  (7)、src/css/step.css  (组件样式)

365bet亚洲真人 19365bet亚洲真人 20

.ant-steps-head {
    width: 200px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.ant-steps-text{
    width: 200px;
    font-size: 16px;
}

.ant-steps-head-inner {
    margin: auto;
    border-color: #2db7f5;
    display: block;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    font-size: 18px;
    -webkit-transition: background-color .3s ease,border-color .3s ease;
    transition: background-color .3s ease,border-color .3s ease;
}

.ant-steps-icon {
    color: #fff;
    line-height: 1;
    top: -1.5px;
    position: relative;
}


.ant-progress-line {
    width: 235px;
    margin-left: -75px;
    line-height: 40px;
    position: relative;
    display: inline-block;
}

.ant-progress-outer {
    padding-right: 45px;
    margin-right: -45px;
    display: inline-block;
    width: 100%;
}

.ant-progress-inner {
    display: inline-block;
    width: 100%;
    background-color: #c1c1c1;
    border-radius: 100px;
    vertical-align: middle;
}


.ant-progress-bg {
    border-radius: 100px;
    height: 4px;
    background-color: #2db7f5;
    -webkit-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
    position: relative;
}

.step-main-div{
    display:inline;
    width: 315px;
}

.step-main-div-move{
    margin-left: -120px;
}

View Code

  (8)、在品种根目录下,展开bash,实行npm install,
等待实施达成,项指标根目录下会多出node_modules文件夹,那是项目所急需的部分凭借文件。

  (9)、最后npm run dev,将品种跑起来…

发表评论

电子邮件地址不会被公开。 必填项已用*标注