成都创新互联网站制作重庆分公司

微信小程序开发教程-创新互联

一、开发前准备
申请账号、安装开发者工具
二、文件与目录结构
1、程序主体:
app.js
app.json 程序配置
1.1、程序配置

成都创新互联公司主要从事网站设计制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务平顶山,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
pages 页面路径
    window 页面的窗口表现
     tabBar 底部tab切换
     networkTimeout
     debug
        {
                 "pages":[  //哪个写在上面,哪个就是入口文件
                        "pages/index/index",
                        "pages/movie/movie",
                        "pages/logs/logs"
                 ]
        }

app.wxss 公共样式
2、页面:
index.js
index.json 页面配置
2.1、页面配置
window 页面的窗口表现
index.wxss 页面样式
index.wxml 页面结构
三、注册程序与页面
1、注册app,只需要注册一次,可以得到一个程序的实例,可以被其他页面访问
在其他页面,通过getApp全局函数获取应用实例 const app = getApp(); 获取全局数据:app.gldData; //{a:1}

App({
    gldData:{ a:1 },
    onLaunch:function(){  //一运行小程序就会执行
        //初始化代码
    }
})
2、注册page,有几个页面,在每个页面内都需要注册
Page({
    data:{
        b:2
    },
    onLoad:function(){   //一进入页面就会执行
        console.log( this.data )  //{b:2}  通过this,获取单个页面内数据
    }
})

四、程序生命周期
1、App

App({

  //在小程序运行期间,只会执行一次
    //程序销毁之后(过了一段时间没有运行或者手动删除小程序),再次启动小程序就会执行
    onLaunch(){
        console.log('小程序启动时执行')
    },
    //每次从后台切换出来就会执行
    onShow(){
        console.log('切换到小程序时执行')
    },
    //每次切换到后台就会执行
    onHide(){
        console.log('小程序被隐藏在后台时执行')
    }
})

2、Page

Page({
    //tab之间的切换,不会让页面重新加载,也不会卸载,只会让页面显示与隐藏
    //在进行NavigatorTo链接跳转的时候,目标页面会被加载onLoad,原始页面会被隐藏onHide
    //此时点击导航条上的回退按钮NavigatorBack,目标页面会onShow,不会onLoad,原始页面会被卸载onUnload

    //页面加载的时候执行,只会执行一次
    onLoad(){   },
    //页面第一次渲染完成之后执行,只会执行一次
    onReady(){  },
    //页面显示就会执行,会执行多次,比如tab切换从a页面切换到b页面,那么也就是等于b页面显示了
    onShow(){   },
    //页面隐藏就会执行,会执行多次,比如tab切换从a页面切换到b页面,那么也就是等于a页面隐藏了
    onHide(){   },
    //页面卸载的时候执行,只会执行一次
    onUnload(){ },
})

五、数据与列表渲染
1、数据在index.js里面的data里面定义,

Page({
    data:{ //数据类型,可以是字符串、数组、对象、数值等等
        name:'kate'
    }
})
要输出到页面上,直接就是{{name}}即可

2、渲染数组 wx:for wx:key

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3']
    }
})
{{item}}

3、条件渲染 变量为true,即满足条件就进行渲染,反之就不进行渲染

等级B 
等级C
等级A

4、块级渲染block,block是虚拟组件,不会出现在页面上
同时显示多个元素


    {{ name }}
    {{ score }}
    等级A


    {{ name }}
    {{ score }}
    等级B

5、使用模板

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3'],
    score:80,
    name:'aaa'
    }
})
先定义模板:


 

 

使用:

    
    
     //data="{{name,score}}等价于data="{{name:name , score:score}}

6、import与include
可以把模板定义在专门的template.wxml里面
要使用里面的模板,只需要在对应的wxml里面
//import引入的模板,你需要在页面上告知使用的是哪一个模板,
//include引入模板,在页面上什么位置写上,那么模板代码就在什么地方显示
微信小程序开发教程

六、事件
绑定事件


    点击

tabHandle(event){
    //event:是事件对象,里面有detail等属性
    //target:事件从哪里触发的
    //currentTarget:事件在哪个上面执行的,通过event.currentTarget.dataset.name可以获取到到"容器"这个自定义值
    //比如点击text,那么target就是text,currentTarget是外面的view,因为冒泡了,所以尽管点击text,tabHandle事件仍然会触发
}
如果要阻止事件冒泡,那么就使用catch,而不是bind,如:

    点击

这样点击text,tabHandle事件仍然会触发,但是view上一级就不会冒泡上去了,因为阻止冒泡了
七、样式wxss
尺寸单位:rpx,只要设置宽度为750rpx,那么不管在什么手机上都是占满一整个屏幕
引入样式:@import '../style.wxss'
全局样式与局部样式:定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
八、微信小程序脚本语言wxs
不支持es6的语法,就当成es5的javascript

定义(写在模板页面内):
  
    function createName(names){
        return names.split(',')
    }
    module.exports = createName
    //tool就表示导出的函数createName

使用:
{{item}}

也可以将wxs代码写在一个单独的.wxs文件内,然后引入这个文件,类似于js
tool.wxs
function createName(names){
        return names.split(',')
    }
module.exports = createName
模板页引入:
使用:{{item}}

九、更新页面data数据

data:{
    number:1
}
onTap(){
    this.data.number = 2;  //错误
    this.setData({
        number:2;  //正确
    })
}

总结:使用setData可以更改data里面的数据(同步更新),然后视图也会更新(异步更新)
不是更改一个data,视图就马上更新,而且确定data不会更改之后,将所有更改的data一次性渲染到视图(尽管是异步更新,时间间隔仍然很短)

十、组件
页面由组件组成
view、text就是一个组件,只不过没有样式
看文档学习微信小程序内置组件
https://developers.weixin.qq.com/miniprogram/dev/component/

十一、自定义组件
举例说明:新建magicNumber.组件
首先:创建magicNumber.文件夹,里面创建magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json文件

magicNumber.wxml文件:

        {{nowIn}}
    {{magicNumber}}
    点击显示magicNumber值

magicNumber.json文件:
{
    "component":true
}
magicNumber.js文件:
这里是注册组件,不是注册页面,所以不能是Page({}),而是:
Component({
    properties:{
        nowIn:String
    },
    data:{
        magicNumber:Math.random(),
    },
    attached(){  //默认一上来就触发一次getMagicNumber事件,这样父组件监听到触发了,也会马上触发他的getMagicNumberHandle事件,所以一上来就默认更新了
        this.triggerEvent('getMagicNumber',this.data.magicNumber)
    },
    methods:{  //子组件的事件写在methods里面
        onTap(event){
            this.setData({
                magicNumber:Math.random()
            })
            this.triggerEvent('getMagicNumber',this.data.magicNumber)  //第二个参数是传到父组件的值
            //子组件向父组件传值,通过自定义事件,使用triggerEvent,告知父组件,该修改某个值了,点击的时候,传达一些信息过去,这里传过去this.data.magicNumber这个值,也可以传递对象过去,作为第二个参数
            console.log(event.currentTarget.dataset.name)  //获取到data-name="文字"里面的"文字"
        }
    }
})

组件注册完毕,接下来是在某个页面进行使用
假如在index页面使用,首先在index文件夹下面创建index.json文件,里面配置:

{
  "usingComponents": {
    "magic-number":"/pages/magicNumber/magicNumber"
  }
}
使用:index.wxml

  
  {{num}}

index.js
Page({
    data:{
        num:Math.floor(maN*1000)
    },
    getMagicNumberHandle(event){  //监听子组件的getMagicNumber事件,一旦触发了,马上做出回应
                console.log(event.detail);  传过来的信息可以通过【事件对象】event.detail获取到
                this.setData({
                    num:Math.floor(event.detail*1000)  //这里就是处理了从子组件拿到的值
                })
        }
})

十二、路由
两种方式实现导航的跳转
1、navigator内置导航组件
url:要跳转的页面地址
open-type:跳转方式,有5种方式
navigate:默认跳转方式
redirect:重定向
switchTab:跳到某个tab
navigateBack:回退
reLaunch:重加载

  • 页面切换,open-type="navigate"
    index.html
    
    About
    Movie  
    Logs  //tab切换
    回退  //回退到上一个页面
    重定向到Movie 上方有回退按钮
    reLaunch 上方没有回退按钮
    

    ★logs属于底部tab,不可使用navigate跳转,只能使用下面的tab切换进行跳转

2、api跳转
wx.navigateTo(object) 跳转到
wx.redirectTo(object) 重定向
wx.switchTab(object) 跳到某个tab
wx.navigateBack(object) 回退
wx.reLaunch(object) 重加载

about.wxml
使用api跳转到movie
about.js
Page({
    goMovie(){
       wx.navigateTo({
            url:'/pages/movie/movie'
        })
    }
})

十三、授权与用户信息授权

  • 获取用户昵称、性别,头像等等,需要在页面上先放置一个button,即授权button,用户点击确认之后才可以获取用户信息
    1、通过按钮来获取用户信息

    如果开始用户没有点击授权,会弹出一个弹框,用户可以选择授权或者不授权,点击授权,通过回调函数onGetUserInfo,里面有事件对象event,可以获取到用户的信息

2、通过普通点击事件获取
在用户未授权过的情况下调用此接口,将不再出现授权弹窗,会直接进入 fail 回调。在用户已授权的情况下调用此接口,可成功获取用户信息。所以,最好先使用button来获取用户信息


getUserInfo(ev){
   wx.getUserInfo({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(err)=>{
            console.log(err)
        }
    })
  }

★通过普通点击事件获取用户api,不会出现提醒授权弹框

  • 获取其他信息,如位置等等的,需要先调取wx.authorize(object)的api,获取用户的授权, 然后再调用相关的api,直接获取信息,未授权先进行授权
    微信小程序开发教程

案例:获取用户地理位置

  //这时候,仅仅是得到用户授权可以获取地理位置,具体的信息还一无所知,需要通过其他的api来获取最终的位置信息
getAuthorize(){
   wx.authorize({
        scope:'scope.userLocation',
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }

getLocation(){
   wx.getLocation({
        success:(msg)=>{
            console.log(msg)
        },
        fail:(error)=>{
            console.log(error)
        }
    })
  }
      //查看哪些用户信息已经授权可以使用
    getSetting(){
       wx.getsetting({
            success:(msg)=>{
            console.log(msg,'授权相关信息')
        }
        })
    }
      //用户第一次拒绝授权地理位置等信息,
    //后续授权确认弹框将不再出现,这里可以手动打开授权信息面板,如图所示,用户手动设置完成之后回退回去,会执行下面的方法
    openSetting(){
       wx.opensetting({
            success:(msg)=>{
            console.log(msg,'设置相关信息完成')
        }
        })
    }

微信小程序开发教程

十四、使用缓存
在movie页面缓存数据
使用缓存,多个页面从而可以共享一些数据,但是使用起来需要慎重
异步缓存数据:


   wx.setStorage({
            key:'name',  //缓存数据的键名
            data:{  //可以是字符串或者对象
                p1:'lin'
            },
            success:()=>{  //有回调函数,成功的时候才执行
                console.log('存储名字成功');
               wx.getStorage({  //获取缓存,可以同步或者异步
                    key:'name',
                    success:(data)=>{
                        console.log(data)
                    }
                })
            }
        })
    }

同步缓存数据:

wx.setStorageSync('names','kate');
let names = wx.getStorageSync('names');
console.log(names);

在about页面获取缓存数据,同步获取缓存数据

{{name}}

Page({
    data:{
        name:''
    },
    getName(){
        let n = wx.getStorageSync('name');
        console.log(n);
        if(n){
            this.setData({
                name:n.p1
            })
        }
    }
})

移除缓存的数据,同步移除

removeName(){
wx.removeStorageSync('names');
}

十五、请求与反馈,类似ajax,axios


goRequest(){
       wx.showLoading({ //一个loading动画,请求成功了会消失,下面已经定义了
            title:'请求中'
        });
       wx.request({
            url:''www.baidu.com,
            data:{  //给服务器传递请求数据
                name:‘joe’
            },
            methods:'post',  //默认是get请求
            success:(res)=>{
                console.log(res.data);
                //请求成功的反馈
               wx.showToast({
                    title:'请求已经成功'
                })
                //请求成功隐藏loading
               wx.hideLoading();
            },
            fail:(e)=>{
               wx.showToast({
                    title:e.errMsg
                })
            }
        })
    }

★详情-不校验域名合法域名

十六、微信小程序线上环境搭建
微信小程序开发教程
1、注册并且登录腾讯云-解决方案-微信小程序-关联账号
2、上传代码
微信小程序开发教程
微信小程序开发教程

【总结】:
父组件向子组件传值,通过properties传值
子组件向父组件传值,通过自定义事件,使用triggerEvent,告知父组件,该修改某个值了,点击的时候,传达一些信息过去,这里传过去this.data.magicNumber这个值,也可以传递对象过去,作为第二个参数

零碎知识点
1、对象被转为字符串就变成了[ object object ]
2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".
一直显示这个,因为把methods写在了data{}里面,作死!!
微信小程序开发教程
3、微信开发者工具:清缓存可以清除用户登录信息

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


名称栏目:微信小程序开发教程-创新互联
网站网址:http://cxhlcq.com/article/cocogo.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部