创建微信小程序。
 
       这篇博客包括两个内容 1.创建微信小程序
 
                                            2.查看微信小程序的Appid以及生成密钥
 
1.创建微信小程序
 
（1）.https://mp.weixin.qq.com/cgi-bin/wx微信小程序官网网址
 
  进入微信小程序官网后，页面的最下面有个  “注册按钮” -->点击绿色的“注册按钮”
 
 
 
 
（2）开始注册，输入你的邮箱，密码，确认密码，验证码-->勾选协议--> 点击"注册按钮"
 
 
（3）邮箱激活 ：登录第一步提供的邮箱，会收到一条链接，点开链接
 
    注意:收的的链接是有时间限制的，一段时间不操作，会失效的
 
 
 
（4）进行个人信息的填写  -->选择个人  
 
                                     -->填写下面标红的信息
 
 
收到短信验证码后会出来一个二维码，用自己的微信扫一下
 
   注意：上面注册人的信息要和微信注册的信息一致
 
 
 
微信扫完之后，点击继续
 
 
到这里就注册成功了
 
2.返回主页，查看Appid和生成密钥
 
   先点击自己的头像，然后点击名字，最后点击开发设置
 
 
 
 
 
生成密钥需要用你注册的微信扫一下二维码，就可以查看密钥了，自己试试把，我就不加进去了。
 
希望这篇博客能够帮助到大家，有不好需要改进的地方，或者有什么好的建议，欢迎大家给我留言，如果您喜欢的话，也可以转发，让更多的人少走弯路。谢谢您的观看！
 
 

创建小程序实例
 
点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
 
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
 
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。想了解更多可用 API，可参考 API 文档
 
//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
 
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解
 
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
 
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
 
/**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 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
 
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
 
index.wxml 是页面的结构文件：
 
<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{hasUserInfo}}">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
    <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
 
本例中使用了<view/>、<image/>、<text/>来搭建页面结构，绑定数据和交互处理函数。
 
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
 
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }
  },
  getUserInfo: function(e) {
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})
 
index.wxss 是页面的样式表：
 
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
 
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
 
index.json 是页面的配置文件：
 
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
 
logs 的页面结构
 
<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>
 
logs 页面使用 <block/> 控制标签来组织代码，在 <block/> 上使用 wx:for 绑定 logs 数据，并将 logs 数据循环展开节点
 
//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})
 
工程目录如下：
 

 
 

 
 

QQ讨论群：785071190

创建页面
创建小程序页面非常简单，鼠标在需要创建页面的目录右击，可看到下图菜单，选择“Page”即可创建出一个页面。

输入页面名称，回车就可以创建出一个页面所需要的四个文件.json  .js  .wxss  .wxml
 
小程序页面创建完成后，app.json中pages属性将自动添加一条记录"pages/index/demo"

您可以通过使用 document.createElement() 方法来创建 <search> 元素：
 
var x = document.createElement("INPUT");
x.setAttribute("type", "search");
 
 
 
可以自己设计答题小程序，自己出题，然后给到别人考试答题的。
 
 
 
   我们开发的一款微信出题的小程序，大家都可以免费使用我们的小程序来给到别人考试答题。
 
   每个人都可以使用我们的答题小程序，出卷子，给到自己的用户、公司内部考试、学校学生考试。考完试以后还有成绩排名，可以看到每个人的排名。  如果想发红包，也可以！你可以在卷子里充值红包，然后设置奖励规则，答对多少分奖励多少钱，这样就让考试更好玩，更有趣了。
 
     首先，打开我们的小程序答题系统，点击我要出题。进到出题界面，每个人都可以免费的使用我们的答题小程序出题和出卷。     
 
     要出一场考试，需要分两个步骤。一个是添加考卷，一个是添加考题。    添加考卷和添加考题没有先后顺序，随便先开始哪个都可以。 
 
 
      点击添加考题，就可以出题了。   点击添加考卷，就可以出考卷了，添加考卷里你可以添加设置你的考试信息，比如考卷的名字，考试的开始时间、结束时间以及是否设置红包，让别人答题可以领到红包。 添加设置好了考卷，就可以在你的考卷列表里找到你的这场考卷，点击编辑，然后点击增加考题，就可以把你添加好的考题题目，添加到你的考卷里了。
 
  这里是我们考试的具体操作步骤说明，你也可以看下哈。   出考卷和考题的操作步骤说明：https://mp.weixin.qq.com/s/DojmR2XJJlvyusoZIrz-OA     添加好了考题和考卷，怎么分享给其他人答题呢？这里有分享考卷的操作步骤说明：https://mp.weixin.qq.com/s/GgX0jAnZaImkDhuLtOwvlA
 
 
 
 
 
（微信扫一扫即可进入答题小程序体验）
 
 
 
好了，今天小编就给大家介绍到这里了。对上面说到的，如果还有什么不明白的，可以和我微信沟通。
 
如需了解更多欢迎留言互动或者私信小编一起交流探讨（xwy7775）！