• 微信小程序开发测试


    微信小程序 在2017-01-09正式上线,本着跟上时代潮流的精神,写一份教程来看看

    微信IDE下载地址为:

    微信IDE

    在windows下直接 双击 exe安装即可,安装完成后的界面如下:

    得到这个界面直接用微信扫二维码就可以登陆了,新建项目方法如下:

    添加项目

    直接点击下图的添加项目:

    新建项目

    AppID 是需要申请才能有的,而且一般是以公司级别的才能申请吧,看了官方文档是需要这些东西:

    有能力的企业可以去这里按照官方文档申请:

    AppID

    类似我等 闲杂的小程序员 就选择 无 AppID

    项目名称 随意填写,你开心就好

    项目目录 是一个 文件夹 ,文件夹包含的文件在下面讲解:

    项目目录

    项目目录 必须包含结构如下:

    -- pages
      -- index
        -- index.js
        -- index.wxml
        -- index.wxss
    -- app.js
    -- app.json
    

    其中 app.js 里面的代码为:

    App({
      onLaunch: function () {
        console.log('App Launch')
      },
      onShow: function () {
        console.log('App Show')
      },
      onHide: function () {
        console.log('App Hide')
      }
    })
    

    app.json 里面的代码为:

    {
        "pages":[
            "pages/index/index"
        ],
          "window":{
            "navigationBarBackgroundColor": "#BBDEF8",
            "navigationBarTitleText": "TTyb",
            "navigationBarTextStyle":"white"
            }
    }
    

    pages 里面放的相当于一个显示网页,wxml 相当于前端的 html 文件,wxss 相当于前端的 css 文件,js 文件就是 js 文件,为了打印出 hello world ,示例如下:

    index.js:

    var flag = true;
    Page({
      data:{
        // text:"这是一个页面"
        color: "window"
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })
    

    index.wxml:

    <view>
        <text class="{{color}}">Hello World</text>
    </view>
    

    index.wxss:

    .window{
        color: #E6CAFF;
    }
    

    得到结果如下:

    源码在我的github里面:

    TTyb

  • 相关阅读:
    control与delegate的Invode、BeginInvoke (一) jason
    你是否愿意每周最少工作80小时 (转)
    详解ASP.NET的SEO:服务器控件背后故事
    深度解析Windows Phone 7开发
    .NET 4新特性:表、SEO及可扩展输出缓存
    VS2010中Parallel类实现并行计算
    iPhone破解软件定制版blackra1n 提供下载
    .NET 4中废弃的特性
    Windows Server 2008 R2上安装WSUS 3.0 SP2
    关于浮动
  • 原文地址:https://www.cnblogs.com/TTyb/p/6269313.html
Copyright © 2020-2023  润新知