小程序

公司接下来要写小程序，我就利用闲暇时间看了一下。记录一下

1.查找自己的AppID。 wx1ce9d2fa00aabe07

        登录 https://mp.weixin.qq.com ，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。

2.下载微信开发者工具；创建项目。

        创建项目：本地项目的名称随便写。选项本地文件夹，存放项目代码。

• AppID：依照官方解释来填。
• Appname: 项目最外层文件夹名称，如你将其命名为「ABC」，则之后的全部项目内容均将保存在「/ABC/…」目录下。
• 本地开发目录：项目存放在本地的目录

       预览项目：在菜单>工具>预览，之后微信扫描二维码就可以在手机上预览了。

3.项目代码，分类。 

            最关键也是必不可少的，是 app.js、app.json、app.wxss;

           .js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss后缀的是样式表文件,相当于css。

4.简介 。   

app.js 是小程序的脚本代码。这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API

//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里面添加小程序的页面。每个页面单独创建文件夹。有单独的.js .wxml .wxss。 .wxml相当于html     

3 4 5 6 7 8 9 10 11 12

{    "pages" : [      "pages/index/index" ,      "pages/logs/logs"    ] ,    "window" : {      "backgroundTextStyle" : "light" ,      "navigationBarBackgroundColor" : "#fff" ,      "navigationBarTitleText" : "WeChat" ,      "navigationBarTextStyle" : "black"    } }

3 4 5 6 7 8 9 10 11 12

{    "pages" : [      "pages/index/index" ,      "pages/logs/logs"    ] ,    "window" : {      "backgroundTextStyle" : "light" ,      "navigationBarBackgroundColor" : "#fff" ,      "navigationBarTitleText" : "WeChat" ,      "navigationBarTextStyle" : "black"    } }

app.wxss 是整个小程序的公共样式表。

4 5 6 7 8 9 10

/**app.wxss**/ . container {    height : 100 % ;    display : flex ;    flex - direction : column ;    align - items : center ;    justify - content : space - between ;    padding : 200rpx 0 ;    box - sizing : border - box ; }

index.js 里面的

Page({

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

    
    wxml中，搭建页面。  
    
    
<image><text><view>
    
    
<view> <text class="window">Hello</text></view>
   
   

3 4 5 6 7 8 9 10 11 12

{    "pages" : [      "pages/index/index" ,      "pages/logs/logs"    ] ,    "window" : {      "backgroundTextStyle" : "light" ,      "navigationBarBackgroundColor" : "#fff" ,      "navigationBarTitleText" : "WeChat" ,      "navigationBarTextStyle" : "black"    } }