开发微信小程序

2017-11-09

整体配置

1、必不可少的三个文件app.js、app.json、app.wxss，js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件

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

3、app.json是对整个小程序的全局配置，在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题

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

创建页面

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。

1、规定描述页面的这四个文件必须具有相同的路径与文件名

2、页面的配置文件（.json），或者样式文件（.wxss），会覆盖 app.json、app.wxss

关于页面组件和样式
1、小程序里是没有div的，要用view
2、小程序没有a标签，页面链接用 navigator
3、样式的话，抛开盒模型，用flex写布局。

关于列表渲染和操作
WXML 中的动态数据均来自对应 Page 的 data。
xxx.js

Page({
  data:{
    manager_list:[
         {
            user_id: 1,
            user_name: "小红花",
            mobile: "18612345678"
        },
           {
            user_id: 2,
            user_name: "小胖子",
            mobile: "18612345678"
        },
           {
            user_id: 3,
            user_name: "烟仔",
            mobile: "18612345678"
        },   {
            user_id: 4,
            user_name: "对的",
            mobile: "18612345678"
        },   {
            user_id: 5,
            user_name: "飒飒",
            mobile: "18612345678"
        }
    ]
  },

使用wx:for 渲染列表。
使用 wx:for-item 可以指定数组当前元素的变量名。
使用 wx:for-index 可以指定数组当前下标的变量名.
xxx.wxml

<view class="items" wx:for = "{{manager_list}}" wx:key="unique" wx:for-item = "item" wx:for-index = "idx">
  <view class="top">
    <text  class="user-name">{{item.user_name}}</text>
  <view class="del" bindtap = "delete_admin" data-idx = "{{idx}}">删除</view>
</view>

bindtap = “delete_admin” 双击事件绑定 delete_admin（）方法。
小程序里面是不能用js操作dom的，所以，如果我们要实现，点击 删除 按钮，获取该用户id，可以用wx:for-index，把前数组的下标存起来。

在xxx.js 中，可以这么获取：

1	var i = e.target.dataset.idx;

表单提交

表单组件中 name 来作为 key,当点击表单中 formType 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交。

xxx.wxml

<form bindsubmit="formSubmit">
	<view class="top">
		<view class="name">
		  <label>姓名</label>
		  <input name="user_name" placeholder="请输入管理员姓名" maxlength = "15" value = ""/>
		</view>
		<view class="tel">
		  <label>手机号码</label>
		  <input name="mobile" placeholder="请输入管理员手机号" type="number" maxlength = "11"  value=""/>
		</view>
		<text class="dec">管理员可用手机号码登录</text>
	</view>
	<view class="bottom">
	 	<button formType="submit"> 完成 </button>
	</view>
</form>

xxx.js

formSubmit: function(e) {
     if(e.detail.value.user_name.length==0){
       wx.showToast({
        title: '姓名不能为空!',
        icon: 'loading',
        duration: 700
      })
     }else if(e.detail.value.mobile.length===0){
      wx.showToast({
        title: '手机号码不能为空!',
        icon: 'loading',
        duration: 700
      })
     }else if(!(/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value.mobile))){
      wx.showToast({
        title: '请输入正确的手机号码!',
        icon: 'loading',
        duration: 700
      })
     }else{
      wx.request({
        url: 'https://xxx',
        data:{
          mobile: e.detail.value.mobile,
          user_name: e.detail.value.user_name
        },
        method: POST,
        header: {
            'content-type': 'application/json',
        },
        success: function(res) {
          if(res.err_code == 0){
           wx.redirectTo({
              url: '/pages/admin/manag_admin/manag_admin'
            })
          }
        }
      })
     }   
  },