微信小程序-20170421学习笔记

Posted 2020-09-12

    /**
     * 微信小程序 笔记
     */

    1.文件结构
        微信小程序 官方给与的结构为：
        projectName
            pages
                index
                    index.js
                    index.wxml
            app.js
            app.json

        这里重点看一下，app.json
        {
          "pages": [
         
              "pages/index/index"
          
          ],
          "window": {
            "navigationBarTitleText": "Demo"
          },

          "networkTimeout": {
            "request": 10000,
            "downloadFile": 10000
          },
          "debug": true
        }
        这里的pages 就是设置 访问页面的顺序。这里强调一下，此配置项为顺序加载。

        在这里为适应实际开发需要，修改了app.json 文件及文件目录。
        projectName
            eapdomain
                src
                    pages
                        index
                            index.js
                            index.wxml
            app.js
            app.json

        app.json 修改为
        {
          "pages": [
         
              "eapdomain/src/pages/index/index"
          
          ],
          "window": {
            "navigationBarTitleText": "Demo"
          },

          "networkTimeout": {
            "request": 10000,
            "downloadFile": 10000
          },
          "debug": true
        }

        前台显示成功。
    2.渲染
        这里渲染主要是通过创建对应页面的wxml文件和js文件进行实现。在这里强调一下，对于一个页面来说wxml文件和js文件为必须存在的对于json文件和wxss文件为可选文件。
    3.模板加载
        1）创建wxml 模板文件
        eg:
            <text>this is head template file</text?
        通过 include 的方式引入
        2）创建wxml 模板文件 使用template 标签进行调用
        eg:
            <template name="head">
                <text>this is head text</text>
            </template>

            <template name="footer">
                <text>this is footer text</text>
            </template>
        前台文件 使用
        <import src="../template/template1"/>
        <template is ="head"/>

        模板数据传递：在模板文件中对应的模板标签 定义显示的变量

        <template name="footer">
            <text>footer text:{{text}}</text>
        </template>

        前台调用时设置 template 的 data属性
        <template is ="footer" data="{{text:showView}}"/>

本文出自 “洛山红茶的成长” 博客，请务必保留此出处http://85608547.blog.51cto.com/2093443/1918304